HTML5-浮动

常见的网页布局:

标准文档流

概念：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

标准文档流组成:

块级元素（block）: <h1>…<h6>、<p>、<div>、列表

内联元素（inline）: <span>、<a>、<img/>、<strong>...

注意：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。

<例如：h1中可以嵌套span元素，但是span中不能嵌套h1元素>

display属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

display:block;

【显示为块元素，能让行内元素显示宽高，能让行内元素具有块元素的特征】

display:inline;

【显示为行内元素，能让块元素具有行内元素的特征】

display:inline-block;

【吸取行内元素和块元素共同的特征，既能排在一行，又能显示宽高】

display:none;

【元素在页面上看不见，隐藏了，但是在源代码中依然存在】

display特性：

块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）

块元素排在一行的方法

可以使用什么属性使块元素排在一行？ 1.inline-block 2.float

float属性

设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面

示例：

……
<body>
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
</body>
</html>

设置左浮动

依次设置三个图片所在<div>左浮动

.layer01 {
	border:1px #F00 dashed;
	float:left;
}

.layer02 {
	border:1px #00F dashed;
	float:left;
}

.layer03 {
	border:1px #060 dashed;
	float:left;
}

设置右浮动

依次设置layer01和layer02右浮动

.layer01 {
	border:1px #F00 dashed;
	float:right;
}

.layer02 {
	border:1px #00F dashed;
	float:right;
}

inline - block和float的区别：

1. display:inline-block

①可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

②位置方向不可控制，会解析空格

③IE 6、IE 7上不支持

2. float

①可以让元素排在一行并且支持宽度和高度，可以决定排列方向

②float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

边框塌陷

layer04设置宽度和右浮动后，为什么边框塌陷了？

浮动元素脱离标准文档流，父集里面没内容了就剩下了最上面的一个框

怎么解决？

清除浮动

clear属性

示例：

清除左浮动：

.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:left;
}

清除右浮动：

.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:right;
}

清除两测浮动

.layer01 {
	border:1px #F00 dashed;
	float:left;
}

.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:both;
}

解决父级边框塌陷的方法：

1. 浮动元素后面加空div

<div id="father">

  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>

  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>

  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>

  <div class="layer04">浮动的盒子……</div>

  <div class="clear"></div>

</div>

.clear{  clear: both;  margin: 0; padding: 0;  }

弊端：太多空元素会造成阅读困难

2. 设置父元素的高度

<div id="father">

  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>

  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>

  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>

  <div class="layer04">浮动的盒子……</div>

</div>

#father {height: 400px; border:1px #000 solid; }

弊端：高度不可控，不灵活

3. 父级添加overflow属性

<div id="father">

  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>

  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>

  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>

  <div class="layer04">浮动的盒子……</div>

</div>

#father {overflow: hidden;border:1px #000 solid; }

优缺点：很完美，但是属性太多；不好分别。

overflow属性

scroll和auto的区别是在使用auto时，横向如果不需要滚动滚动条就会消失

4. 父级添加伪类after

<div id="father" class="clear">

  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>

  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>

  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>

  <div class="layer04">浮动的盒子……</div>

</div>

.clear:after{

    content: '';          /*在clear类后面添加内容为空*/

    display: block;      /*把添加的内容转化为块元素*/

    clear: both;         /*清除这个元素两边的浮动*/

}

优点：目前最好的方法，企业里都这么用

清除浮动，防止父级边框塌陷的四种方法优缺点：

浮动元素后面加空div：简单，空div会造成HTML代码冗余
设置父元素的高度：简单，元素固定高会降低扩展性
父级添加overflow属性：简单，下拉列表框的场景不能用
父级添加伪类after：写法比上面稍微复杂一点，但是没有副作用，推荐使用

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/nanjinzhu/article/details/82716522
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-31 12:06:16
阅读 ( 1803 )
分类：前端

HTML5-浮动

常见的网页布局:

标准文档流

display属性

display:block;

display:inline;

display:inline-block;

display:none;

display特性：

inline - block和float的区别：

解决父级边框塌陷的方法：

1. 浮动元素后面加空div

2. 设置父元素的高度

3. 父级添加overflow属性

4. 父级添加伪类after

清除浮动，防止父级边框塌陷的四种方法优缺点：

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看