好程序员-千锋教育旗下高端IT职业教育品牌
官方微信
2022-12-02
神仙 元素 姐姐
众所周知，clear属性是用来清除浮动的副作用使用的，那么这个c属性也只有块级元素才有效的，而在万能清除法中，::after伪对象选择器中的content的属性值，默认都是内联元素，所以需要在做清除浮动操作的时候，添加display:block;的原因。
.clear::after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
然而，利用伪对象给下方元素添加使用的时候，也会有产生一些意想不到的问题:
<div style="clear:both;"></div>
我们来看一下下方在这个案例，如果我们在右侧自适应内容里面使用了类似这样的样式，则可能会发生右边的内容跑到图片下边的情况。
HTML代码如下:
<body>
<div class="wrap">
<img src="./img/liuyifei.jpeg">
<div class="person">
神仙姐姐1，神仙姐姐2
<div class="clear"></div>
神仙姐姐3，神仙姐姐4，神仙姐姐5，神仙姐姐6，神仙姐姐7，神仙姐姐8
</div>
</div>
</body>
CSS代码如下：
<style>
.wrap {
border: 1px solid #444;
overflow: hidden;
}
.wrap>img {
width: 60px;
height: 64px;
float: left;
}
.person {
margin-left: 70px;
}
.clear {
clear: both;
}
</style>
页面效果如下：
上图中的文字就是添加了clear : both;这个属性导致自适应布局错位。原因就是由于clear: both的作用本质是让自己不和float元素在一行显示，并不是真正意义上的清除浮动，因此float元素一些不好的特性依然存在，于是，会有以下类似的现象。现象1.如果clear:both 元素前面的元素就是float元素，则margin-top负值即使设成-9999px，也不见任何效果。现象2.clear:both 后面的元素依旧可能会发生文字环绕的现象。举个例子，如下 HTML和 CSS:
HTML代码：
<div class="wrap clear">
<img src="./img/liuyifei.jpeg">
这为神仙姐姐刘亦菲，好美好漂亮~这为神仙姐姐刘亦菲，好美好漂亮~这为神仙姐姐刘亦菲，好美好漂亮~
</div>
<div class="box">虽然世间美的事物那么多，心灵的美才是最美的。</div>
CSS代码：
.clear::after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.wrap{
border: 1px solid #000;
}
.wrap img{
width: 60px;
height: 64px;
float: left;
}
.box{
margin-top: -2px;
}
页面效果如下：
根据上面的效果显示，虽然给wrap这个盒子添加了万能清除法，但是依然没能阻止浮动对后面元素的影响，所以错位效果就发生了，如图2所示。所以，clear: both只能在一定程度上消除浮动的影响，要想完美地去除浮动元素的影响，还需要使用其他CSS声明。比如给wrap这个父元素添加overflow:hidden;或者display:inline-block;等属性来解决，底层原理主要涉及到BFC特性，请听下节讲解。(此文案例有借鉴张鑫旭《css世界》一书，特此鸣谢)
扫码开启架构师蜕变之旅 >>
开班时间：2021-04-12（深圳）
开班盛况开班时间：2021-05-17（北京）
开班盛况开班时间：2021-03-22（杭州）
开班盛况开班时间：2021-04-26（北京）
开班盛况开班时间：2021-05-10（北京）
开班盛况开班时间：2021-02-22（北京）
开班盛况开班时间：2021-07-12（北京）
预约报名开班时间：2020-09-21（上海）
开班盛况开班时间：2021-07-12（北京）
预约报名开班时间：2019-07-22（北京）
开班盛况
Copyright 2011-2023 北京千锋互联科技有限公司 .All Right
京ICP备12003911号-5
京公网安备 11010802035720号
