float造成父级元素塌陷的问题
2019-07-09 本文已影响0人
Karsure
解决方法有4种类:
1.在使用浮动的元素后面加一个div,属性设置为style="clear: both" ,但增加了额外的html代码。
2.在使用浮动元素的父级容器加属性overflow:hidden,这种方法在你添加下拉选项等操作时会将下拉的选项隐藏掉,这种场合下不适用。
3.父元素设置display: table,改变了盒模型的属性,会出现其他问题。
4、给父级容器加一个class="clearfix",完美解决:
.clearfix:after {
display:block;
content:"clear";
clear:both;
line-height:0;
visibility:hidden;
}
(1) display:block使生成的元素以块级元素显示,占满剩余空间;
(2) height:0避免生成内容破坏原有布局的高度。
(3) visibility:hidden使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
(4) 通过content:""生成内容作为最后一个元素,至于content里面是点还是其他都是可以的
(5) zoom:1触发IE hasLayout。
通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0