CSS——浮动及清除浮动

浮动

• 浮动目的：最初是为了其余内容（如文本）“围绕”该图像，后来CSS容许浮动任何元素
• 浮动产生bug的缘由：当一个内层元素浮动时，若是没有关闭浮动，父元素就不会再包含这个浮动的内层元素了，由于此时浮动元素已经脱离了文档流，致使外层不能被撑开

浮动和绝对定位的区别

• 以下代码：

html

<div class="box">
        <div class="left"></div>
        <div class="right">
            我只是想测试一下哈哈哈哈哈哈哈哈哈
        </div>
    </div>

css

.left{
        width: 200px;
        height: 300px;
        background-color: red;
        position: absolute; //绝对定位  浮动则换成float:left
    }
    .right{
        width: 500px;
        height: 400px;
        background-color: blue;
    }

• 效果

绝对定位

浮动

• 绝对定位：彻底脱离文本流，而且相对于其包含块定位，以后的元素会完全占据以前元素位置，文本也会
• 浮动：文本环绕浮动元素

浮动的影响

• 背景不能显示，边框不能撑开，margin、padding不能正确显示，以下代码
  

• 效果展现
  

从上面效果能够看出，父级元素的背景颜色未被显示，而且父级元素高度塌陷（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷），box的高度为0

清除浮动（使用较多的方法）

overflow

• 在其父元素设置{overflow:hidden}，就是在以上代码的box元素上加上这一行代码

• 原理：由于这个属性至关因而让父级紧贴内容，便可紧贴其对象内内容

  clear:both

• 在浮动元素下方添加空div,并给该元素写css样式{clear:both;}

  • 问题：增长了HTML和CSS代码量

    父级元素也浮动

• 让浮动元素的父级元素也浮动

• 问题：每一个元素都得浮动，容易出问题

  伪类清除方法（主流）

• 将父级div（clearfix）定义以下代码
  

• 原理： 利用伪类在元素内插入两个元素块

清除浮动后的效果