关于浮动元素对父元素高度的影响

Posted 2020-09-30 兔子先生

css浮动会使子元素脱离文档流，有些情况下会使其父元素失去高度，从而影响页面的整体布局。

解决的办法就是：使用浮动之后，记得清除浮动，

下面是几种清除浮动的方法：

第一种:

父元素:after{
   content:"";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

第二种：

<div class="box">
    <div class="top"></div>
    <br clear="both" /><!--利用br标签清除浮动-->
</div>

清除浮动的方法还有许多，就不一一列出了。