背景
有两个div父盒子, 内部子元素是浮动的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding:0px;
margin: 0px;
}
.box, .box2 {
width: 1000px;
border: 2px solid red;
}
.box p, .box2 p {
width: 100px;
height: 50px;
background-color:pink;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<p></p>
<p></p>
</div>
<div class="box2">
<p></p>
<p></p>
</div>
</body>
</html>
方法一: 设置父元素高度
添加父元素高度, 值等于子元素高度 缺点: 如果浮动的子元素大小改变, 父元素不能自适应
.box, .box2 {
width: 1000px;
height: 50px;
border: 2px solid red;
clear: both;
}
方法二: 给父元素添加clear属性, 清除标签元素自身受到的前面的浮动的影响
clear属性的属性值:
| 属性值 | 解释 |
|---|---|
| left | 清除前面左浮动带来的影响 |
| right | 清除前面右浮动带来的影响 |
| both | 清除前面左右浮动带来的影响 |
.box, .box2 {
width: 1000px;
/* 方法一: 设置父元素高度 */
/* height: 50px; */
border: 2px solid red;
clear: both;
}
缺点: 如果两个父元素间设置了margin, 会塌陷
方法三: 外墙法/隔墙法
在两个父盒子之间添加一个div, 为div设置clear属性
css:
.cl {
clear: both;
}
<body>
<div class="box">
<p></p>
<p></p>
</div>
<div class="cl"></div>
<div class="box2">
<p></p>
<p></p>
</div>
</body>
优点: 可以用div的height模仿margin的高度 缺点: 父盒子高度不能自适应
方法四: 内墙法
在父元素内部，所有的浮动子元素后面添加一个空的
元素，标签高 度为 0，添加 clear 属性。
.cl {
clear: both;
}
<body>
<div class="box">
<p></p>
<p></p>
<div class="cl"></div>
</div>
<!-- 方法三: 外墙法 -->
<!-- <div class="cl"></div> -->
<div class="box2">
<p></p>
<p></p>
<div class="cl"></div>
</div>
</body>
优点: 可以解决所有问题, margin不会塌陷, 父盒子高度可以自适应
.box, .box2 {
width: 1000px;
/* 方法一: 设置父元素高度 */
/* height: 50px; */
border: 2px solid red;
/* 方法二: 父元素设置clear:both */
/* clear: both; */
margin: 10px;
}
缺点: 使用html的代码解决css的问题, 造成结构冗余
方法五: 伪类
本质是使用伪类方法利用css代码书写一堵内墙。
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。 :after：这个伪类表示选中的是某个标签内部的最后的位置。
书写方法：前面必须加普通的选择器，后面连续书写伪类名称。 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一 个clearfix的类名。
.clearfix:after {
content: "1";
display: block;
height: 0px; /*不让文字1撑高位置*/
clear: both;
visibility: hidden; /*隐藏属性, 与overflow: hidden的区别在于它不会让出位置*/
}
<body>
<div class="box clearfix">
<p></p>
<p></p>
<!-- 内墙法 -->
<!-- <div class="cl"></div> -->
</div>
<!-- 方法三: 外墙法 -->
<!-- <div class="cl"></div> -->
<div class="box2 clearfix">
<p></p>
<p></p>
<!-- 内墙法 -->
<!-- <div class="cl"></div> -->
</div>
</body>
可以解决所有问题
方法六: 溢出隐藏
给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以 解决浮动的所有问题.
overflow属性:
- 元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
- 元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适 应内容的高度。
高度自适应原因： 一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动不影响后面的元素： 父元素有了高度后，可以管理住内部所有的浮动元素，不会 延伸到后面标签中影响贴边。
.box, .box2 {
width: 1000px;
/* 方法一: 设置父元素高度 */
/* height: 50px; */
border: 2px solid red;
/* 方法二: 父元素设置clear:both */
/* clear: both; */
overflow: hidden;
}
总结
- 如果父元素高度是固定的，建议使用 height 属性解决。
- 如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。
