<div class="container">
<h3 style="float: left;">我是一个浮动的元素</h3>
</div>
<div class="content">我是一个普通的P标签</div>
1. clear: both
对浮动元素后面的元素添加clear both，或者通过给一个:after伪元素添加。
.content{
clear: both;
}
2. 父元素设置高度
给浮动元素的父元素设置固定的高度。
.container{
height: 100px;
}
3. 父元素overflow
给浮动元素的父元素设置overflow: hidden / auto
.container{
overflow: auto; //or
overflow: hidden;
}
如果子元素浮动后，父元素的高度无法由内容撑开，给父元素加上该属性后可以解决此问题。
父元素高度无法撑开.png
4.父元素设置display
属性值可以是flex、table-cell
.container{
display: flex; //or
display: table-cell;
}
网友评论