子元素float之后父级div不能被撑开(清浮动)的解决

子元素float之后父级div不能被撑开问题的解决

未浮动前 :

样式:

.container{
    border: 1px solid #000;
}
.content{
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

主体

<div class="container">
    <div class="content"></div>
</div>

效果

给 .content 添加浮动样式后

效果

问题原因

由于子元素使用了float样式, 导致父级元素Div, 原有的默认样式display : block; 和 clear : both; 消失, 这也是浮动带来的主要问题. 所有针对这些问题, 清除浮动的主要方法如下.

解决方法

1. 伪类法:

   在父级元素添加伪类:after

   .container:after{
       content : "";
       clear : "both";
       display : block;
   }

2. overflow: hidden, 只需给父级元素添加这个样式即可.

3. 给父级添加一个子div:

        <div style="clear:both;"></div>