浮动及清除浮动

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局（脱标），只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样

语法float：left|right|none

性质

1.浮动的元素会脱离标准流，且浮动之后，已经不区分行内、块级了

2.浮动的元素会互相贴靠，当窗口大小容纳不下时会自动换行

3.浮动可以用来处理文字围绕效果，如

 

 

 

div挡住了p，但不会挡住p中的文字，形成“字围”效果。标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）

4.一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

清除浮动

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

优点：通俗易懂，方便，缺点：添加无意义标签，语义化差

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

优点：代码简洁，缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3.使用after伪元素清除浮动（推荐使用，是给父元素添加该after伪元素，，.clearfix是父元素的类）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

4.使用before和after双伪元素清除浮动（是给父元素添加该伪元素，，，.clearfix  是父元素的类）

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
优点：代码更简洁

缺点：用zoom:1触发hasLayout.

推荐使用



posted @ 2021-04-22 16:52  浣熊sky  阅读(111)  评论(0)    收藏  举报