CSS浮动+BFC

CSS浮动+BFC

一.浮动

1. 常用场景

- 文字环绕图片效果

- 块级元素竖向转横向排列(不推荐)

注: 此时行内元素可设置宽与高,由于横向排列后的元素间隙不容易控制,后此场景逐渐被弹性布局方案取代

2. 语义化理解

• 浮动的元素比正常页面的层级高出一层,漂浮在正常页面的上方,脱离了标准的文档流

3. 属性

img{
	float:left;
}

 - none		无浮动(默认)
 - left		左浮动
 - right		右浮动
 - inherit	继承父级浮动

4. 负面影响

- 撑不开父元素的高度,造成高度塌陷

- margin失效

5. 清除影响

注: 清除的仅是浮动本身对页面产生的影响,而不是将浮动清除

- 新增div或br标签使用clear属性(不推荐)

注: 会增加多余不必要的标签

div{
	clear:both;
}

- 父级元素加高(分情况)

注: 有时区域的高度不固定,无法使用这种方法

- 父级触发BFC(分情况)

注: 实质是能够计算浮动起来的元素高度,利用子元素高度撑开父元素

float：left/right
position:absolute/fixed
display：inline-block/table-cell/table-caption/flex/inline-flex
overflow：hidden/scroll/auto

- 父级伪元素选择器(推荐)

单伪元素
div:after{
    content: "";
    display: block;(与clear配套)
    height: 0;(IE有高度)
    clear:both;
    visibility: hidden;
}
div{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 */
}

双伪元素
div:after,div:before{
content: "";
display: table;
}
div:after{
    clear: both;
}
div{
    *zoom: 1;
}

6. 相关知识

- clear属性

 - none		不清除影响(默认)
 - left		清除左浮动影响
 - right		清除右浮动影响
 - both		清除左右浮动影响
 - inherit	继承父级clear属性

- 浮动造成的margin失效

• 浮动元素增加margin-bottom
• 清除浮动产生的影响

二. BFC

1.语义化理解

• BFC代表块级格式化上下文,意思就是它能建议一块新的区域隔离开其他区域渲染,一旦元素触发了BFC,其子元素即使是浮动起来的也能计算高度,也就清除了浮动造成的影响

2.常用场景

- 父元素随着子元素的margin-top变化

- 垂直方向的两个盒子margin-bottom与margin-top取大值

利用BFC可以解决以上问题