深入理解系列之 float

标签：play   很多   伪元素   何事   zoom   contain   适应   高度   生成   

float的设计初衷：

仅仅是为了实现文字环绕效果

float的感性认知：

1. 包裹性：
   1. 收缩：元素应用了float后，宽度收缩，紧紧地包裹住内容（即元素的宽度收缩到元素内的内容的宽度大小
   2. 坚挺：原来没有高度，但元素应用了float后，元素的高度突然扩展到内容的高度大小
   3. 隔绝：元素应用了float后，盒子里面的内容发生了任何事情，都与盒子外的内容无关（BFC）
2. 破坏性:
   1. 子元素应用了float后，父容器塌陷：父容器的高度变为0

tips: 具有包裹性（BFC特性）的其他属性：
display: inline-block/table-cell
position: absolute/fixed/sticky
overflow: hidden/scroll
具有破坏性的其他属性:
display: none
position: absolute/fixed/sticky

清除float对其他元素所带来的影响：

1. float元素底部插入一个带有 clear: both; 属性的元素
   1. 底部放置一个HTML block水平元素 -
   2. CSS after（IE8+）伪元素底部生成 - .clearfix:after{ clear: both; }
2. 父元素BFC化（IE8+）或 haslayout（IE6/7)

BFC/haslayout的通常声明

1. float: left/right
2. position: absolute/fixed
3. overflow: hidden/scroll（IE7+)
4. display: inline-block/table-cell（IE8+)
5. width/height/zoom: 1/...（IE6/7）

综上，IE8以上浏览器使用：
```css
.clearfix:after {
content: ‘‘;
display: block;
height: 0;
overflow: hidden;
clear: both;
}

.clearfix {
*zoom: 1;
}

css
/更好的方法/
.clearfix:after {
content: ‘‘;
display: block;
height: 0;
overflow: hidden;
clear: both;
}

.clearfix {
*zoom: 1;
}
```

切记，.clearfix 只需应用在浮动元素的父级元素上 浮动的特性:

1. 元素block块状化（砖头化）
2. 破坏性造成的紧密排列特性（去空格化)

智能化自适应布局

<div class="container"><a href="#" class="left"><img src="url"/></a>
    <div class="right">很多其他内容</div>
</div>

  .container {
        width: 600px;
        margin: auto;
    }

    .left {
        float: left;
        margin-right: 20px;
    }

    .right {
        display: table-cell;
        *display: inline-block;
        width: 2000px;
        *width: auto;
    }

深入理解系列之 float

标签：play   很多   伪元素   何事   zoom   contain   适应   高度   生成   

原文地址：https://www.cnblogs.com/liuyishi/p/9162501.html