javascript - clear:both 放置的位置

css

.container{
    margin: 30px auto;
    width:600px;
    height: 300px;
 }
.p{
    border:solid 3px #a33;
 }
.c{
    width: 100px;
    height: 100px;
    background-color: #060;
    margin: 10px;
    float: left;
 }

 <p class="container">
      <p class="p">
           <p style="clear:both">//为什么不能写元素之前？
           <p class="c"></p>
           <p class="c"></p>
           <p class="c"></p>                                                                                                            
           <p style="clear:both">

       </p>
     </p>

带有clear属性的元素为什么不能写浮动元素之前？

# JavaScript

曾经蜡笔没有小新1896 天前644 次浏览

全部回复(6) 我要回复

ringa_lee2017-05-19 10:34:04

带有clear属性的元素写在浮动元素之前，那它两侧本来就没有浮动元素，这个属性没有任何作用

迷茫2017-05-19 10:34:04

在 css 文档里面规定 clear:both 的意思是：

要求框的顶边框边低于在源文档中之前生成的任何浮动框的底外边距边。
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

所以有 clear:both 属性的元素放在浮动元素之后才能起到闭合浮动的作用。
我一般清除浮动是通过浮动元素的父元素的伪元素实现的。在你这个例子中就是

.p:after{
    clear:both;
    display:block;
    content:"";
}

after 伪元素是父元素的最后一个子元素，所以能清除这个块里面的浮动。

巴扎黑2017-05-19 10:34:04

先了解float的影响和clear的作用吧。多写demo，感受感受，你就知道放哪了。多看文档多百度

PHPzhong2017-05-19 10:34:04

clear:both;要写在浮动元素之后，清除浮动。

phpcn_u15822017-05-19 10:34:04

说说我的理解吧
clearboth 是针对的自身
所以<p style="clear:both"/> 表示清除此元素的左右的浮动.如果放到前面那最后的浮动元素还是会影响父元素

给我你的怀抱2017-05-19 10:34:04

对于 clear 属性一定要牢记的是：
1）该属性是针对元素本身的，比如说 A B C 三个浮动元素，想要清除C元素左边的浮动，则是将clear作用在C上，写成:

  C {
     clear : left
  }   
当然你会想，写成
  B {
      clear : right;
  }

行不行呢？答案是不行。因为clear只能清除该元素之前的浮动。
"clear on an element only clears the floats before it in document order. It doesn't clear floats after it."

2）清除浮动的方式有不少，不过最常见，也是最优化的一种就是就是使用伪元素：

    Parent :after{
        clear:both;
        display:block;
        content:"";
    }

取消回复发送