清浮动-BFC

一、float浮动

1、特性

•  脱离文档流
• 块状该元素（一个内联元素，设置了float，则相当于为该内联元素设置了 display:block）
•  没有margin重叠
• 包裹性

2、清浮动的方法

.在浮动元素尾部加空div

<div id="wrap" class="warp">
	<div id="one" class="clo" ></div>
	<div id="two" class="clo"></div>
	<div id="three" class="clo"></div>
	<div id="four" class="clo"></div> 
	<div style="clear:both"></div>
</div>

.warp{
    width:1260px;
    margin:auto;
    border:1px solid red;
}
clo{
    width:80%;
    height:100px;
    float:left;
    background-color:#e34cf1;
    border:5px solid #fff;
}

 

父元素设置overflow:hidden;

<div id="wrap2" class="warp">
    <div id="one" class="clo" ></div>
    <div id="two" class="clo"></div>
    <div id="three" class="clo"></div>
    <div id="four" class="clo"></div> 
</div>

#wrap2{
    border:2px solid green;
    overflow:hidden;
}

为父元素添加伪类

<div id="wrap3" class="warp">
    <div id="one" class="clo" ></div>
    <div id="two" class="clo"></div>
    <div id="three" class="clo"></div>
    <div id="four" class="clo"></div> 
</div>

#wrap3:after{
    content:" ";
    display:block;
    height:0px;
    clear:both;
}

 父元素设置float属性

#wrap3{
   float：left;
}

 

二、文档流

• 在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的
• 相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的

三、BFC

BOX盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX
FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，会去【计算子元素的大小，以及和其他元素的关系和相互作用】
Block fomatting context (简称BFC)
Inline formatting context (简称IFC)

1、特点：

• 内部的box会在垂直方向，从顶部开始一个接着一个地放置（文档流）
• box 垂直方向的距离由margin(外边距)决定。属于同一个BFC的两个相邻box的margin会发生叠加（文档流）
• BFC的区域不会与float box叠加
• 计算BFC高度时，浮动元素也参与计算
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

2、触发方式

• 设置除 float:none 以外的属性值（如：left | right）就会触发BFC
• 设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）就会触发BFC
• 设置 display属性值为: inline-block | flex | inline-flex | table-cell | table-caption 就会触发BFＣ
• 设置 position 属性值为：absolute | fixed 就会触发BFC
• 使用 fieldset 元素（可以给表单元素设置环绕边框的html元素）也会触发BFC