I moved to the cloud notes long before the blog, unified maintenance.
1. BFC understanding (block-level formatting context)
You can think of it as an isolated container, where the layout of the inner elements does not affect the outer elements. Can be triggered by CSS properties.
Floating elements create a floating flow, block-level elements are “invisible”; Elements of the text-class attribute (inline), text elements, and elements that generate BFC see floating elements.
2. How to trigger the BFC
Location, float, overflow: hidden, display is not null.
(1) position:absolute or fixed;
(2) the float: left/right;
(3) the overflow: hidden; Not visible, common mode;
(4) display: inline – block; Flow-root, Table-cell, Table-Caption, Flex, inline-Flex, etc.
3. Problems solved by BFC: margin merging, detection of floating height, making adaptive box on the right
Use BFC to avoid margin overlap. For example, if two divs are next to each other and margin is 100px, then the actual gap between the top and bottom is only 100px. At this point, give each a layer of bread, add their respective BFC.
4. Features of BFC layout rules
(1) In the BFC, the boxes are arranged one after the other, starting at the top.
(2) Margins of adjacent boxes belonging to the same BFC will be merged. Solution: Put a div on top of the box and set overflow:hidden; This does not belong to the same BFC as the box below.
(3) When calculating the height of BFC, the height of the floating box will be calculated. If you set the parent element to a BFC box, you can clear the inner float of the child element. The most common use is to set overflow on the parent element: Hidden style, for IE6, add zoom:1.
(4) BFC produces a right adaptive box. Left div: overflow: hidden; Can be solved. Scene 1, unset: Set width and height to div1 and float (blue), set width and height to div2 (width adaptive) and float to no.
At this point, the text element “sees”, or is affected by, the floating element. As shown in figure:
Div2 setOverflow: hidden;The effect is equivalent to a float and can be width adaptive. As shown in the figure:
5. Two-column layout
Idea: Set the right side first and then the left side with BFC. (1) position the first element absolutely, right: 0; Or float: right; (2) Set the second one, and leave enough space for the first one.
6. Block element height is not set or width is not set.
(1) When the height of the parent div is not set, the height is supported by the child elements. Pseudo code:
.ff{ margin-top:10px; width: 200px; height: 100px; background: #2fe29e; border: 1px solid #ccc; } .ss{ width: 50px; border: 1px solid #000; } <div class="ff"> <div class="ss">Copy the codeAs shown in figure:
.ff{ margin-top:10px; width: 200px; height: 100px; background: #2fe29e; border: 1px solid #ccc; } .ss{ height: 50px; border: 1px solid #000; } < div class = "ff" > < div class = "ss" > ss width default 100% < / div > < / div >Copy the codeAs shown in figure:
(3) If the child element is set to float and does not occupy the position, and the parent element height is not set, then the parent element height is 0. Trigger the BFC (four conditions) to the parent element to solve this problem. Eg: If the child element floats, the parent element will have no height, triggering the BFC to solve the problem
.ff { margin-top: 10px; width: 200px; background: #2fe29e; border: 5px solid #ccc; /* overflow: hidden; /* float: left; */ /* display: inline-block; */ /* position: absolute; */ } .ss { float: left; height: 50px; border: 1px solid #000; } <div class="ff"> <! <div class="ss"> <div class="ss"> <div class="ss"> <div class="ss"> Float or not? <div class="ss"> <div class="ss"> </div> </div>Copy the codeWithout BFC setting, the height of the parent element is 0, and there is no background, so the effect is not achieved, as shown in the figure:
