子元素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;
消失, 这也是浮动带来的主要问题. 所有针对这些问题, 清除浮动的主要方法如下.
解决方法
伪类法:
在父级元素添加伪类
:after
.container:after{ content : ""; clear : "both"; display : block; }
overflow: hidden, 只需给父级元素添加这个样式即可.
- 给父级添加一个子div:
<div style="clear:both;"></div>