BFC
BFC (Block Formatting Context), Chinese is a block-level formatting context. It provides an independent container for elements, in which the layout is arranged according to certain rules, the elements in the container will not affect the external elements, and the external elements will not affect the internal elements.
Circumstances that trigger BFC
- float is not none
- position is absolute or fixed
- overflow is not visible
- display is inline-block or table or flow-root
Elements that produce BFC
The elements whose display is block, list-item, and table
Situations that BFC can handle
Clear the float inside the element
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 350px;
background-color: blue;
margin: 10px auto;
}
.child{
width: 100px;
height: 100px;
float: left;
line-height: 100px;
text-align: center;
background-color: cornsilk;
}
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
reason:
- Parent element has no height set
- The child element is set to float, which breaks away from the document flow, and the parent element cannot count the size of the child element
Solution
- add height to father
- Add float to the father, just don't set it to none
- The father adds position, set to absolute or fixed
- Father plus overflow:hidden
- Add display:inline-block to the father
- Add an empty element after the child element and set the style to clear:both;
margin-top collapse
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 350px;
height: 350px;
background-color: blue;
}
.child{
width: 100px;
height: 100px;
background-color: cornsilk;
margin: 10px auto;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
Solution
1. Add an attribute that can trigger the BFC effect to the parent element
2. Add a non-zero border to the parent element
Margin overlap in the vertical direction
<div class="parent">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 200px;
height: 500px;
background-color: blue;
}
.child{
width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
text-align: center;
}
.child1{
background-color: crimson;
margin-bottom: 20px;
}
.child2{
margin-top: 50px;
margin-bottom: 70px;
background-color: cyan;
}
.child3{
margin-top: 50px;
background-color: darkorange;
}
</style>
Solution
Add a parent element for each child element, and set a style that can trigger BFC.
Adaptive Layout – text wraps around graphics
<div class="parent">
<img src="./img/xh_img3.jpg" alt="" class="img">
<div class="text">每一个男子全部都有过这样的两个女人，至少两个。娶了红玫瑰，久而久之，红的变成墙上的一抹蚊子血，白的还是‘床前明月光’；娶了白玫瑰，白的便是衣服上沾的一粒饭黏子，红的却是心口上一颗朱砂痣。</div>
</div>
*{
margin: 0;
padding: 0;
}
.parent{
width: 200px;
height: 250px;
border: 1px solid #000;
}
.img{
width: 100px;
height: 100px;
float: left;
}
.text{
background-color: darkturquoise;
}
css originally designed the floating style to achieve the effect of text wrapping
Solution
Add overflow:hidden for the text part
adaptive layout
After setting overflow, an adaptive layout appears: the width on the left is fixed, and the right is adaptive.
out of document flow
Block-level elements vs. inline elements
From an HTML point of view, tags are divided into
- Text-level tags: p, span, a, b, i, u, em…
- Container-level tags: div, h, ul, ol, dl, li…
From a CSS point of view, tags are divided into:
- Inline elements: span, a, img, i, em... Except for p elements in text-level tags
- Block-level elements: div, h, ul, ol, dl container-level tags + p tags
The difference between block-level elements and inline elements
- Block-level elements occupy one line regardless of width and height, and in-line elements have no width and height, and are expanded with content
- If the block-level element does not set width and height, the width is the same as the parent element, and the height is expanded by the content, and 0 if there is no content.
- Any element can be nested inside a container-level tag, and text-level tags can only place text, pictures, and form elements.
- The p tag is a text-level tag from an html perspective, and can only contain text, pictures, and form elements
- Block-level elements such as h tags, p, and dt can only contain inline elements, and cannot contain block-level elements
Converting block-level elements to inline elements
- Set display:block for inline elements to display as block-level elements
- Set display:inline for block-level elements to display as inline elements
- In order to make the element not only occupy one line, but also set the width and height, an inline block-level element appears, display:inline-block.
standard document flow
Standard document flow refers to the default layout of elements from left to right and top to bottom in the process of element typesetting and layout, with automatic line wrapping
Standard Document Stream Class
Block-level elements :
- Even if the width is sufficient, block-level elements are on a single line and are not juxtaposed with other elements
- Width and height can be set, effective
- If no width and height are set, the width is the same as the parent element
Inline elements:
- alongside other elements
- Setting width and height is invalid, the content is stretched
Breaking away from the standard document flow
The standard document flow has many restrictions. For example, if you want to achieve both side by side and set the width and height, you must break away from the standard document flow. There are three ways to get out of document flow:
1. float
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
.parent{
width: 800px;
height: 100vh;
background-color: cornsilk;
border: 1px solid #000;
}
.one{
width: 600px;
height: 200px;
background-color: cadetblue;
float: left;
}
.two{
width: 100px;
height: 200px;
background-color: darkgoldenrod;
}
When both .one and .two are set to float, as long as they are not none, they are out of the standard document flow, and both have width and height and can be side by side. Floating elements have the feature of snapping. If not set, the elements will be close together.
But when the parent element has no height, because the child element is floating, the parent element has no height. At this time, you can use the BFC effect, add overflow or directly increase the height of the parent, and add a pseudo element to clear the float.
Note: It is necessary to develop a good habit of setting width and height; when setting floating, float together if you want to float, and be sure to clear the floating
2. Position is set to absolute or fixed
<div class="parent">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
.parent{
width: 600px;
height: 600px;
background-color: cornsilk;
border: 1px solid #000;
}
.one{
width: 50px;
height: 50px;
background-color: cadetblue;
/*设为fixed也可*/
position: absolute;
top: 0;
left: 0;
}
.two{
width: 100px;
height: 200px;
background-color: darkgoldenrod;
position: absolute;
top: 0;
left: 100px;
}
.three{
width: 200px;
height: 200px;
background-color: rgb(93, 197, 62);
float: left;
position: absolute;
top: 0;
left: 300px;
}
clear: both; clear float
The value of this property indicates that no floating edges are allowed. Add an empty element behind the floating element when using it, set clear:both;
Values can be: left, right, both.