Question

我使用：after和clear：两者都要清理浮动，但我不知道为什么元素必须被阻塞，为什么不内联？

clear：both表示元素（左和右）不能用float元素包围。但如果元素是内联的，则清除不起作用，为什么？这是代码http://jsbin.com/qudujo/edit?html,css,output

Answer 1

默认情况下，:after和:before是内联元素（无法清除）。因为您已将content属性指定为""，所以:after伪元素基本上没有宽度或高度，因此它对父元素没有任何影响（它基本上不占空间）。但是，将其设置为块级元素并将clear属性设置为both将强制它跨越父级的整个宽度，并清除之前的任何浮动元素。

Answer 2

我希望这会有所帮助：缺少一种风格。

＆＃13;

.container{
  border:1px blue solid;
}
.item{
  width:100px;
  height:20px;
  background-color:red;
  border:2px solid;
  float:left;
}
.container:after{
  content:"";

  display:block;
   
  clear:both;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

＆＃13;

我使用：after和clear：两者都要清理浮动，但我不知道为什么元素必须被阻塞，为什么不内联？

2 个答案: