Understand CSS layout and block formatting context
First of all, I declare that this article is reprinted from the WeChat public account "Front-end New Vision". The blogger benefited a lot from reading it at the time, so I want to record it on my blog for future use. If you have any infringements or other issues, please contact the blogger to delete , The blogger QQ: 1105810790
When doing html layout and css writing, have you encountered such problems:
After the child element is set to float out of the document flow, the parent element cannot completely wrap it. When the
child element floats to achieve a two-column layout, another child element overlaps the floating child element. The
vertical margin overlaps
...
Usually we use block-level formatting context (BFC) can solve it.
What is BFC?
Block Formatting Context (BFC) is a part of the visual CSS rendering of a Web page. It is the area where the layout process of the block box occurs, and it is also the area where floating elements interact with other elements.
FC (formatting context) literally translates to formatting context, which is a rendering area in the page. There is a set of rendering rules that determine how its child elements are laid out, as well as the relationship and role of other elements.
BFC is an isolated and independent container on the page. The child elements inside the container will not affect the outside elements, and the container element will not affect the layout of the sibling elements.
Under what circumstances will BFC be created?
Root element or element containing the root element
Floating element (the element's float is not none)
Absolutely positioned element (the element's position is absolute or fixed)
inline block element (the element's display is inline-block)
table cell (the element's display is table -cell, HTML table cell defaults to this value)
table title (the display of the element is table-caption, and the HTML table title defaults to this value)
anonymous table cell element (the display of the element is table, table-row, table-row -group, table-header-group, table-footer-group (respectively the default attributes of HTML table, row, tbody, thead, tfoot) or inline-table)
block elements
whose overflow value is not visible display value is flow-root Element (new method, mentioned at the end of the article)
contain elements whose values are layout, content, or strict
elastic elements (display is a direct child of flex or inline-flex elements)
grid elements (display is a grid or inline-grid element Direct child element)
multi-column container (the element's column-count or column-width is not auto, including column-count is 1)
an element whose column-span is all will always create a new BFC, even if the element is not wrapped in a Multi-column container.
Common application scenarios
Make the parent element contain floating elements
The following example explains how to make the floating content and the parent element the same height, clear that floating negatively affects
html
<div class="outer">
<div class="float">I am a floated element.</div>
I am text inside the outer box.
</div>
css
.outer {
border: 5px dotted rgb(214,129,137);
border-radius: 5px;
width: 450px;
padding: 10px;
margin-bottom: 40px;
}
.float {
padding: 10px;
border: 5px solid rgba(214,129,137,.4);
border-radius: 5px;
background-color: rgba(233,78,119,.4);
color: #fff;
float: left;
width: 200px;
margin: 0 20px 0 0;
}
It is a common practice to set the left text to float to the left to achieve the text wrapping effect. When the text is long enough, the following effects will be seen, and the parent element can completely wrap the child element.
But in fact, the text in the float has been separated from the document. If the document flows too little text, the floating element will overflow the edge of the parent element.
At this time, setting overflow: auto for the parent element or any valid value other than the invisible default value can create a BFC to solve this problem and make the parent element contain floating elements
.outer {
overflow: auto;
}
BFC prevents overlapping of vertical margins
The rule for margin folding is: when two block-level elements are adjacent and in the same block-level formatting context, their vertical margins will overlap
htnl
<div class="outer">
<p>I am paragraph one and I have a margin top and bottom of 20px</p>
<p>I am paragraph two and I have a margin top and bottom of 20px</p>
</div>
css
.outer {
background-color: #ccc;
margin: 0 0 40px 0;
}
p {
padding: 0;
margin: 20px 0 20px 0;
background-color: rgb(233,78,119);
color: #fff;
}
Since there is no content between the edge of the p element and the margin on the outer div, the two will merge, so the paragraph ends up flush with the top and bottom of the box. We can't see any gray above and below the paragraph. As shown in the figure below:
When the parent element is set to BFC, the overlapping area of the parent element and the child element p will no longer be merged
.outer {
background-color: #ccc;
margin: 0 0 40px 0;
overflow: auto;
}
BFC prevents text wrapping
The layout and style of the text wrapping effect in the above example is still the same as the
html
<div class="outer">
<div class="float">I am a floated element.</div>
<div class="text">I am text...</div>
</div>
css
.float{
float: left;
}
At this time, if you don’t want the text on the right to surround the floating text box, when the left div is set to float, I can make the right div become a BFC, so that the two brother divs are isolated from each other and do not affect each other, so as to eliminate the text wrapping. effect.
.text {
overflow: auto;
}
A new way to create BFC
Many methods of creating BFC usually bring some side effects. The overflow property seems to be the safest so far, but in some cases we don’t need the scroll bar. At this time, the scroll bar becomes a side effect of this method, so the display has A new attribute flow-root can be used in any scenario where BFC needs to be created, and it will not bring any side effects.
Compatibility of flow-root browsers:
Browser support for this value is limited. If you want to create a fallback in a browser that does not support flex or grid layout, it is necessary to understand the negative effects of BFC to prevent floating elements.
Again, this article is reprinted from the WeChat public account "Front-end New Vision". The blogger benefited a lot from reading it at the time, so I want to record it on my blog for future use. If you have any infringements or other issues, please contact the blogger to delete , The blogger QQ: 1105810790