css清除浮动的几种方式
css清除浮动的几种常用方法
前言:
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。 css浮动
但是使用了 float 后不清除浮动就会出现父级高度塌陷问题
造成的后果就是父元素高度为0,浮动元素的内容撑不开父元素,这种时候就需要清除浮动
.container{
border: 5px solid#eee;
}
.media {
width: 100px;
height: 100px;
float: left;
background-color:aquamarine;
}
.container p{
float: left;
}
<div class="container">
<div class="media"></div>
<p>hello</p>
</div>
下面介绍清除浮动的方法
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素, 并在CSS中设置 clear 属性即可清理浮动
亦可使用
<br class="clear" />
或
<hr class="clear" />
来进行清理。
<div class="clear"></div>
.clear{
clear:both;
}
clear 属性指定元素两侧不能出现浮动元素
效果图:(可以看到父元素被撑开,说明清除浮动生效)
优点:简单,代码少,浏览器兼容性好。
缺点:不太适合语义化,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow 属性
给浮动元素的容器添加 overflow:hidden;
或 overflow:auto;
可以清除浮动
这是我常用的一种方法,在另一篇 文章 也是使用 overflow属性 清除浮动
.container{
border: 5px solid#eee;
overflow: auto; /* 或者 overflow: hidden; */
}
.media {
width: 100px;
height: 100px;
float: left;
background-color:aquamarine;
}
.container p{
float: left;
}
<div class="container">
<div class="media"></div>
<p>hello</p>
</div>
使用以上代码也可以达到清除浮动的效果
方法三:使用CSS的::after 伪元素
结合 ::after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)
给浮动元素的容器添加一个 clearfix 的 class,然后给这个 class 添加一个 ::after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
.container{
border: 5px solid#eee;
}
.container::after{
content: "020";
display: block;
height: 0;
clear: both;
/* 表示元素不可见 */
visibility: hidden;
}
.media {
width: 100px;
height: 100px;
float: left;
background-color:aquamarine;
}
.container p{
float: left;
}
<div class="container">
<div class="media"></div>
<p>hello</p>
</div>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的"020" ( visibility: hidden; ),
并且赋予clear属性来清除浮动。
总结
通过上面的例子,我们可以发现清除浮动的方法可以分成两类:
一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 ::after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素,就像 加上 overflow:hidden; 。
本人是初入前端的小菜鸟,文章如有错误,恳请大家提出问题,本人不胜感激
文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力 长路漫漫,道阻且长
更多推荐
所有评论(0)