<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
//不给父盒子添加高度,想实现高度自适应
width: 360px;
border: 1px solid #000;
background: #eee;
}
.container p {
width: 100px;
height: 100px;
background: orange;
margin-right: 20px;
float: left;
}
</style>
<body>
<div class="container">
<p></p>
<p></p>
<p></p>
</div>
<p>文本文本文本文本文本文本文本文本文本文本文本</p>
</body>
浮动存在的问题:
浮动元素不能撑高父盒子;
浮动元素会影响后面的浮动元素
解决
- 给父盒子添加height;
- 给后面元素添加clear属性;
- 外墙法
- 内墙法
- overflow:hidden/auto
- 使用伪元素:after清除浮动
- 父元素定义display:table
1、给父盒子添加height;
解决:浮动元素对后面造成的影响
没解决:高度自适应
2、 添加clear属性;
给浮动元素后面的元素添加clear属性
.cl {
clear: both;
}
<div class="container">
<p></p>
<p></p>
<p></p>
</div>
<p class="cl">文本文本文本文本文本文本文本文本文本文本文本</p>
解决:浮动元素对后面元素的影响
没解决:高度自适应
3、外墙法
效果同方法2
.cl {
clear: both;
/*height: 10px;*/高度添不添加没影响
}
<div class="container">
<p></p>
<p></p>
<p></p>
</div>
<div class="cl"></div>
<p>文本文本文本文本文本文本文本文本文本文本文本</p>
4、内墙法
.cl {
clear: both;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<div class="cl"></div>
</div>
<p>文本文本文本文本文本文本文本文本文本文本文本</p>
解决:都解决了
实际工作中并不使用,增加了很多无意义的标签,网页加载变慢
5、overflow
都解决了,简单,推荐使用
6、伪元素::after
.container::after {
content: "";
display: block;
clear: both;
}
都解决了
7、父元素display:table
都解决了,不推荐使用,会产生未知问题