A common location scheme
- Normal stream
default, from the top down, the horizontal rows of elements, full row line feed, block-level elements rendered into a new line. - Floating
press position appears normal stream, then the direction of displacement according to float. - Absolute positioning
element position indicated by the absolute positioning coordinates of the specific composition.
Two BFC
1. What is BFC
BFC i.e. Block Formatting Contexts (context block level format), belongs to the normal stream.
BFC can be understood as a closed large box, inside the box element badly anyway, it will not affect the outside.
2. Trigger BFC
- The root element body
- Float: float value other than none of
- Absolutely positioned elements: position (absolute, fixed)
- display 为 inline-block、table-cells、flex
- In addition to the visible overflow value (hidden, auto, scroll)
3.BFC properties
⑴ under the same margin folding occurs BFC
<head>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</head>
<body>
<div></div>
<div></div>
</body>
Two blocks apart 100px
⑵ BFC may comprise a floating element (clear float)
Floating element will flow out of a normal document, look at an example below:
<div style="border: 1px solid #000;">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
Since the container element floating from the document flow, leading to vessel left 2px margin height, this time we can use BFC:
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
⑶ floating element can be covered with blocking elements
Look at a text wrapping effect:
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
This fact, when the second element is partially covered by a floating element, (but not the text information is covered floating element) If you want to avoid the element is covered, tactile properties BFC second element, the second element adding overflow: hidden, it will become:
