网页布局混乱，clear:both不起作用

江山如画 7年前问题 10599

2018092806141299

网页布局混乱，两个DIV位置错乱了

回复

共1条回复我来回复

江山如画
这个人很懒，什么都没有留下～
评论
div产生位置错乱原因，主要是float浮动造成的，需要使用clear来清附浮动。

但是要注意：

clear属性只是在block元素是起作用，如果你把clear:both用在一个inline-block或inline元素上，clear:both是不会起任何作用的。

如果你想对一个inline-block或inline元素施加clear:both的效果，最简单的方法是用div元素把它包起来，让在这个div上利用::after伪元素实现其内部的元素的clear:both，下面是一种参考的写法：
```
.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}
```
将上面的.clearfix放在包裹inline-block或inline的float元素的div上，它就像表现出类似clear:both的效果。
7年前 0条评论