CSS3中三种清除浮动(float)影响的方式
float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决。但是凡是好用的,也容易出错。比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0等等。
float的特性
1.文字环绕
文字环绕效果是很明显的,这里要注意一个地方:浮动的块虽然脱离的正常的文档流,但是还会占有正常文档流的文本空间,可以看到上面第二种图,p的区域其实是顶到了img的底下的,因为float让img脱离文档流,但是p上的文字却没有顶过去,也就是说p上的一部分文字空间
仍然被img占据着,所以从这里也可以看出float的脱离文档流不是完全脱离。
2.包裹性
所谓的包裹性是指,使用float的元素会自动加上一个块级框
,也就是可以像块级元素那样设置宽高
float的破坏性主要是指它会使父容器的高度塌陷,也就是父元素在高度计算的时候会忽略浮动的元素。
正是由于这个破坏性,为了布局能正常布局,经常需要清除浮动。清除浮动并不是清理自身的浮动的效果,而是清理上面接触到的浮动元素的浮动,使浮动元素后面的元素不接受它们的浮动,按照正常的元素流进行布局。
下面介绍清除浮动的三个方式:
1.增加一个空的标签(div 或 br等都行),通过clear:both语句消除float对后面元素的影响。
<div class="main_left">.main{float:left;}</div> <div class="side_left">.side{float:right;}</div> <!--增加一个空标签--> <div style="clear:both;"></div> <div class="footer">.footer</div>
缺点:需要加很多无意义的标签,对后期维护不利。如果是小程序,那没关系,但如果是大工程,还是慎用。
2.使用:after 伪元素
.clearIt { zoom:1; } .clearIt:before; /*加上before可以防止浏览器顶部的空白崩溃(就是上一个div的margin-bottom和下边的margin-top会发生叠加)*/ .clearIt:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } /* display:block 使生成的元素以块级元素显示,占满剩余空间; height:0 避免生成内容破坏原有布局的高度。 visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互; 通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙; zoom:1 触发IE hasLayout。 */
3.在父元素设置 overflow:auto
<!--为父元素设置overflow--> <div class="wrap" style="overflow:auto;"> <div class="wrap_main_left">.main{float:left;}</div> <div class="wrap_side_left">.side{float:right;}</div> </div> <div class="footer">.footer</div>
当父元素设置了overflow:auto之后,内容元素会被修剪,超出元素不可见。
这种方式的优点是不存在结构和语义化问题,代码量极少。但缺点也很严重,当内容增多时容易因为不会自动换行而导致内容被隐藏掉,无法显示需要溢出的元素。
其实只有clear:both是用来消除float的影响。其它的几种方式都是通过隐藏内容来达到自己的目的。
参照:https://blog.csdn.net/qq_22855325/article/details/78015502