1.问题引出:
此问题来源于书上的一段并不知道何种作用的CSS代码。
/*clearfix, clearfix是div的class属性值*/
.clearfix:after {
content: "";
dispplay: block;
heigth: 0;
clear: both;
visibilty: hidden
}
2.解决:
参看了很多资料才知道这是CSS中用于清除浮动,子元素浮动会是该元素脱离文档流,会导致该元素的外部元素的布局随之发生塌陷。
解释如下:
.clearfix:after { /*利用:after伪类元素在其元素后面添加元素内容*/
content: ""; /*其内容为空,主要用于清除元素不展现出来*/
dispplay: block; /*保证添加的元素为块级元素才有效果*/
heigth: 0;
clear: both; /*关键代码:用于清除左右浮动*/
visibilty: hidden;
}
3.扩展与总结:清除浮动的3种方式
3.1 使用BFC
BFC:(Block Formatting Context):格式化上下文,是web页面中css盒式模型的一种渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
具体使用如下代码所示:
<style> /*内联样式*/
/* BFC */
.div1 {
width: 200px;
border: 1px solid #000;
/*overflow: hidden;*/ /* 1. BFC ,使其成为BFC的其中一个条件*/
}
.div2 {
float: right;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<!--位于body种的元素,外部代码省略-->
<div class="div1">
<div class="div2"></div>
</div>
<p>一段文字</p>
下面分别是未加了overflow=hidden和加其属性的效果图
未加overflow=hidden效果图
加了overflow=hidden效果图
3.2在浮动元素后加一个块级元素如div
<style>
.div1 {
width: 200px;
border: 1px solid #000;
}
.div2 {
float: right;
width: 100px;
height: 100px;
background-color: green;
}
.clear {
clear: both;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
<div class="clear"></div> <!-- 后加的块级元素用于解决浮动问题-->
</div>
<p>一段文字</p>
</body>
3.3 使用:after伪类元素
本质上也是同第二种方式在其子元素后部加了一个块级元素。
note:.clearfix需要加在父元素中而不是子元素中。
<style>
.div1 {
width: 200px;
border: 1px solid #000;
}
.div2 {
float: right;
width: 100px;
height: 100px;
background-color: green;
}
/* 3. clearfix */
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="div2"></div>
</div>
<p>一段文字</p>
</body>
如过感觉不够直观可之间观看视频版总结。点击此处