1.在浮动元素之后添加一个空的div标签,设置clear:both
在浮动元素之后添加一个空的div,并设置该div的宽度和高度为0,clear为both,
清除浮动,此时浮动元素回到正常文档流,且会占据正常文档流的位置,它之后的div
会依次排列在后面
<style type="text/css">
/*在浮动元素之后添加一个空的div,并设置该div的宽度和高度为0,clear为both,
清除浮动,此时浮动元素回到正常文档流,且会占据正常文档流的位置,它之后的div
会依次排列在后面*/
.box {
width: 500px;
background-color: pink;
}
.left {
width: 200px;
height: 80px;
background: red;
float: left;
}
.right {
width: 100px;
height: 200px;
background: green;
float: left;
}
.right1 {
width: 0px;
height: 0px;
clear: both;
}
.right2 {
width: 400px;
height: 100px;
background: black;
}
</style>
<body>
<div class="box">
123
<div class="left">1</div>
<div class="right">2</div>
<div class="right1"></div>
<div class="right2"></div>
</div>
</body>
效果图如下:
清除浮动前:
清除浮动后:
2.给父级元素添加 overflow:hidden属性
给父元素添加overflow:hidden,不给父元素设置高度,清除浮动,
原本浮动的元素会回到正常文档流中,会撑开父元素的高度,
但是它不占据正常文档流位置,下一个元素还是会移动到它下面被覆盖
<style type="text/css">
/* 给父元素添加overflow:hidden,不给父元素设置高度,清除浮动,
* 原本浮动的元素会回到正常文档流中,会撑开父元素的高度,
* 但是它不占据正常文档流位置,下一个元素还是会移动到它下面被覆盖*/
.box {
width: 500px;
background-color: pink;
overflow: hidden;
/*overflow: auto;两者都可以*/
}
.left {
width: 200px;
height: 80px;
background: red;
float: left;
}
.right {
width: 100px;
height: 200px;
background: green;
float: left;
}
/*.right1 {
width: 0px;
height: 0px;
clear: both;
}*/
.right2 {
width: 400px;
height: 100px;
background: black;
}
</style>
<body>
<div class="box">
123
<div class="left">1</div>
<div class="right">2</div>
<div class="right1"></div>
<div class="right2"></div>
</div>
</body>
效果图如下:
清除浮动前:
清除浮动后:
3.给父元素使用伪元素 :after清除浮动
给父元素设置宽,之后再给父元素添加伪元素:after
(.box:after或是.box::after两种写法都可以,后者是css3为了区分伪类和伪元素而弄出来的),
设置display:block;(after伪元素添加的内容默认为行内元素,所以需要设置display:block);
clear:both来清除浮动,此时浮动元素回到正常文档流中,会撑开父级元素的高度,
但是不会占据正常文档流的位置,下一个元素还是会移动到它下面被覆盖
<style type="text/css">
/*给父元素设置宽,之后再给父元素添加伪元素:after
(.box:after或是.box::after两种写法都可以,后者是css3为了区分伪类和伪元素而弄出来的),
设置display:block;(after伪元素添加的内容默认为行内元素,所以需要设置display:block);
clear:both来清除浮动,此时浮动元素回到正常文档流中,会撑开父级元素的高度,
但是不会占据正常文档流的位置,下一个元素还是会移动到它下面被覆盖*/
.box {
width: 1000px;
background-color: pink;
}
.box::after {
content: " ";
clear: both;
display: block;
}
.left {
width: 200px;
height: 200px;
background: red;
float: left;
}
.right {
width: 100px;
height: 400px;
background: green;
float: left;
}
.right2 {
width: 800px;
height: 100px;
background: black;
}
</style>
<body>
<div class="box">
123
<div class="left">1</div>
<div class="right">2</div>
<div class="right2"></div>
</div>
</body>
效果图如下:
清除浮动前:
清除浮动后:
https://segmentfault.com/a/1190000013047380?utm_source=tag-newest