清除浮动本质:
清除浮动本质是清除浮动元素脱离标准流造成的影响
如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
清除浮动语法:选择器{clear: 属性值;}
属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响
实际工作中,几乎只用clear: both;
清除浮动的策略是:闭合浮动
清除浮动方法:
1.额外标签法也称为隔墙法,是W3C推荐的做法。
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
1.额外标签法:
也称为隔墙法,是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如:<div style="clear:both"></div>,或者其他标签(比如<br />等)。
父元素高度塌陷如下图
清除浮动本质:
清除浮动本质是清除浮动元素脱离标准流造成的影响
如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
清除浮动语法:选择器{clear: 属性值;}
属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响
实际工作中,几乎只用clear: both;
清除浮动的策略是:闭合浮动
清除浮动方法:
1.额外标签法也称为隔墙法,是W3C推荐的做法。
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
1.额外标签法:
也称为隔墙法,是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如:<div style="clear:both"></div>,或者其他标签(比如<br />等)。
父元素高度塌陷如下图
<!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>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.fa{
width: 100%;
/* border: 1px solid black; */
background-color: black;
}
.son1{
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2{
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2"></div>
<!-- 方法一:加一行神奇的代码 -->
<div style="clear:both"></div>
</div>
</body>
</html>
果真不塌啦!!!
额外标签法另一种写法👆
额外标签法的优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差。
注意:要求这个新的空标签必须是块级元素。
2.父级添加overflow
可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。
注意是给浮动元素的父元素添加代码
优点:代码简洁
缺点:无法显示溢出的部分
3.父元素添加:after 伪元素法
:after方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7专有 */
*zoom: 1;
}
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器
代表网站:百度、淘宝网、网易等
<!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>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 方法三:为父元素添加:after 伪元素法 */
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
.fa {
width: 100%;
/* border: 1px solid black; */
background-color: black;
}
.son1 {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="fa clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
4.给父元素添加双伪元素清除浮动
给父元素添加
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
<!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>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 方法四:为父元素添加双伪元素 */
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.fa {
width: 100%;
/* border: 1px solid black; */
background-color: black;
}
.son1 {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="fa clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
优点:代码更加简洁
缺点:照顾低版本浏览器
代表网站:小米、腾讯等
清除浮动总结