CSS浮动和清除浮动

 

float：left | right | none | inline-start | inline-end

• left：表明元素必须浮动在其所在的块容器左侧的关键字。
• right：表明元素必须浮动在其所在的块容器右侧的关键字。
• none：表明元素不进行浮动的关键字。
• inline-start：关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
• inline-end：关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

clear：left | right | botn

• left：元素被向下移动用于清除之前的左浮动。
• right：元素被向下移动用于清除之前的右浮动。
• both：元素被向下移动用于清除之前的左右浮动。
• none：元素不会向下移动清除之前的浮动。
• inline-start：该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。
• inline-end：该关键字表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

特性：

• 大部分使用了float之后，将会改变一个元素的display属性为block。
• 浮动元素脱离了正常的文档流。
• 浮动会向指定方向平移，一直平移直到碰到所处容器的边框，或碰到另一个浮动元素停下。

另外当只为子元素设置float时而父元素没有任何宽高值（包括border）时，这时即使父元素为block，父宽度足够的情况下在视觉上子浮动元素会横向排列在一起。

如：

<!-- css -->
    <style>
        .square {
            background: #fff;
            border: 1px solid #999;
            float: left;
            font-size: 24px;
            font-weight: bold;
            line-height: 34px;
            height: 34px;
            margin-right: -1px;
            margin-top: -1px;
            padding: 0;
            text-align: center;
            width: 34px;
        }
    </style>
    <!-- html -->
    <div>
        <button class="square"></button>
        <button class="square"></button>
        <button class="square"></button>
    </div>
    <div>
        <button class="square"></button>
        <button class="square"></button>
        <button class="square"></button>
    </div>
    <div>
        <button class="square"></button>
        <button class="square"></button>
        <button class="square"></button>
    </div>

效果：

 

 这时候我们如果给div加上合适的高：

div{
            height: 33px;
        }

 

 可以看到，3个div成功看起来各占一行。