3.1

作者: 潘达酱qaq | 来源:发表于2017-03-01 23:00 被阅读1次

    1、浮动具有破坏性,元素浮动后,破坏来原来的正常流布局,造成内容塌陷。

    浮动的子元素会造成父元素的高度塌陷.

    第一种解决高度塌陷的方法就是使用overflow。

    在父盒子上设置overflow: hidden;之后,父盒子具有的包裹性,就不会出现高度塌陷的问题了。

    2、Overflow可以触发元素的BFC,可以让元素具有独立的排版的空间和权限,在bfc内部所有的元素都依据父元素进行排版和布局,所有父元素具有了包裹性,这就是解决高度塌陷问题的原理。

    比如:浮动也可以触发bfc,再有:定位、overflow、display:table、table-cell...

    方法一:使用空标记清除浮动,隔墙放。增加标签。

    方法二:使用overflow属性清除浮动。会误伤。

    方法三:使用after伪对象清除浮动。

    方法四:使用before after伪对象清除浮动.

    3、Clearfix的使用场景:

    -父盒子要把所有的子盒子包裹住。

    -父盒子是包裹正行的div元素,需要前后进行清除浮动。

    运用before after来设置content为空,并且display:block或table.

    clearfix设置为触发BFC.

    相关文章

      网友评论

        本文标题:3.1

        本文链接:https://www.haomeiwen.com/subject/gkocgttx.html