Floating
1. What is floating
Floating occurs when the attributes of an element are float not none .
<p class= "float" >float</p>
. float { float:left; width:100px; height:100px; Background-color: #ddd;}2. Impact of floats
Floating causes the element to flow away from the document, as follows:
The parent element is highly collapsed, that is, the floating element is not included.
For example, the above code will show
Parent element Height collapse
Text wrapping.
text wrapping effect
Notice here . Normal The width of the element is covered by the . Float element, but there is no text under the . Float element, which means that the text is "squeezed" out because it is out of the flow of the document, but not out of the text stream. This effect is also the intent of the float property. The code is as follows:
<body> <p class= "float" >float</p> <p class= " Normal "> Normal elements normal elements normal elements normal elements normal element normal elements normal elements normal elements ordinary elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal element normal Usual elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements normal elements elements normal elements normal elements normal elements normal elements normal elements normal elements regular elements ordinary elements normally normal elements common elements normality elements proper elements healthy elements good element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal element normal elements normal elements Elements normal elements normal element normal element normal element normal element </p></body>
body {Background-color : #ccc;}. float {float:left; width:100px; height:100px; Background-color: #ddd;}. Normal {background-color: #fff;} The margins of floating elements are not merged.
The relevant contents of the margin merge can be poked here.
Once the element floats, it becomes an inline block element, that is display: inline-block .
3. Floating Applications
The text mentioned above wraps around.
Write a three-column layout, left and right fixed width, middle adaptive.
<body> <p class= "left float" >left</p> <p class= "right float" >right</p> <p class= "Mid" > Adaptive width Element Adaptive width element Adaptive width element Adaptive width element Adaptive width element Adaptive width element Adaptive width element Adaptive width element Adaptive width element </p></body>
Body { background-color: #ccc;}. float { float:left; width:100px; height:100px; Background-color: #ddd;}. Left { float:left;}. Right { float:right;}. Mid { height:100px; Background-color: #fff; margin:200px; /* Intentionally added up/down margin value */}Here I deliberately added the margin value, you can see the effect:
Three-column layout
bodyIt also .mid goes margin down, which can be explained by the margin merger described earlier.
PS: The first time I wrote this three-column layout, the HTML was written like this
<body> <p class= "left float" >left</p> <p class= "Mid" > Adaptive width element Adaptive width elements Adaptive width element Adaptive width element Adaptive width element Adaptive width element Adaptive width element Adaptive width element Adaptive width element </p> <p class= "right float" >right </p></body>
As the middle of the adaptation of the elements written in the middle, in fact, this is more logical, but if this is not feasible, the right element will fall, because the .mid element is a block-level element, will occupy the entire line, will .left not fall because it is a floating element of the text document flow.
Clear floating
Clear on child elements
Here I only write methods that do not produce meaningless tags.
If you have a sibling element behind a floating element, you can add attributes to its sibling element clear .
If the text wraps around that part of the code, .normal add clear:left or clear:both . clearthe specific usage here does not do too much to repeat.
Add a pseudo-class or pseudo-element to the element to clear floating.
. float::after { content: '; Display:block; Visiability:hidden; height:0; Clear:both;}About:: Use of After can see the documentation for MDN.
Clear on parent element, i.e. BFC
BFC (block formatting context), which is the chunk-level format context, its official explanation is:
Floating, absolutely positioned elements (
positionforabsoluteorfixed), inline block elementsdisplay:inline-block, table cellsdisplay:table-cell, table headings,display:table-captionand elements that areoverflownot attribute valuesvisible(except when the value is propagated to the viewpointviewport) Creates a new block-level formatting context.
To summarize, it should meet one of the following conditions:
floatNot fornone
positionNot for static orrelative
displayFor table-cell ,,, table-caption inline-block flex ,inline-flex
overflowNot forvisible
As long as the parent element plus any one of these attributes satisfies the condition, that is, adding BFC to the parent element clears the child element's float.
"Recommended"
1. Free CSS Online video tutorial
2. CSS Online Manual
3. php.cn Lonely Nine-base (2)-css video tutorial
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
