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

上一篇下一篇

猜你喜欢

热点阅读