Boss Xie (Xie Ran) recently opened a video course “Taking You to Master CSS Floating thoroughly” on SegmentFault lecture room. Because the video is quite long (69 minutes), it is not convenient to review, so I have arranged it and explained it from my own understanding perspective for record.
Page layout is a key application of CSS. For example:
There are two main ways to implement page layouts: CSS Floating and Flexbox (IE9 +). This article focuses on CSS Floating and Flexbox will be discussed in the next article.
The floating element
What is a floating element: An element whose floating element is both inside and outside the regular flow. The block-level element assumes that the float element does not exist, while the float element affects the layout of the inline element. The float element indirectly affects the layout of the containing block by affecting the inline element.
Conventional flow:The flow of elements on a page, from left to right and from top to bottom, is a regular flow
Out of the regular flow:Absolute, fixed elements have their own fixed positions, outside of the normal flow
Containing block:The block-level element closest to an element is its containing block
The following detailed description of the above content, for example? :
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <style> .border { border: 2px solid; } .common-div { width: 160px; height: 50px; background-color: red; } .float-red { width: 100px; height: 50px; background-color: #fcc; float: left; } .float-blue { width: 100px; height: 50px; background-color: #09c; float: left; } </style> <body> <div class="border"> <div class="float-red"></div> <div class="common-div"></div> <div class="float-blue"></div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body> </html>
The above code looks like this:
- The block-level element assumes that the float element does not exist: the red block-level element is unaffected by the pink float element and is displayed in the upper-left corner, but is covered by the pink element on the left-hand side
- Float elements affect inline elements: text is affected by blue float elements, leaving the blue float elements empty
- Floating elements indirectly affect the layout of the containing block: does the floating element affect the text section, making it an extra line? The text section raises the outermost border box, thus indirectly affecting the layout of the containing block.
The floating elements are placed according to the following rules:
- Try to depend on
- As far as possible on the left
- Try to stay close to each other
- You cannot go beyond the containing block unless the element is wider than the containing block
- You cannot exceed the highest point of the row
- It cannot exceed the highest point of the preceding float element
- Inline elements are placed around float elements: float elements appear to the right of left-float elements and to the left of right-float elements
application
Floating elements do not hold up containment blocks, which is not what we would expect. The containing block can be stretched by the following method, called
Closed floating
Closed float method:
- BFC: 1) contains block setting overflow:hidden or 2) contains block setting display:table-cell/table/flex…
BFC: Blocklevel formatting context. It is a separate rendering area, with only the block-level box involved, which dictates how the internal block-level elements are laid out and has nothing to do with the outside of this area.
As long as
A BFC is defined if:
1) the root element
2) The float property is not None
3) position is absolute or fixed
Display: inline-block, table-cell, table-caption, display: inline-block, table-cell, caption, inline-flex
5) The overflow is not visible
For background documentation, see: The Magical Principles of the BFC
- Pseudo elements:
.clearfix::after {
content: '';
display: block;
clear: both;
}
clear:both; Means that block-level elements cannot have floating elements on either the left or right side. Create a dummy element with empty content at the end of the containing block and set clear:both to place this element after all float elements, thus extending the height of the containing block.
- The contain block itself floats
This approach is also used by the W3C. However, the next element will be affected by the floating element. To solve this problem, some people choose to float everything in the layout, and then clean up the float with appropriate meaningful elements (often the footer of the site). This helps reduce or eliminate unnecessary markup.
The corresponding background document: W3C CSS Floating
conclusion
The above is the content of boss Xie in the video, I hope to help you.