float and clear floating in CSS, comb it!

float and clear floating in CSS, comb it!

The first one is to sort out some of the most common floats in CSS and how to clear floats.

What is floating in the end?

Floating core is a word: floating elements move out of the document stream and float left/right until a parent element or another floating element is encountered . Please meditate 3 times!

The purpose of the initial design of the float is not so much, just to achieve the text wrapping effect, as follows:

Text Wrapping Effect

But early front-end developers discovered that floating elements can be set wide and inline, and are inline block a magical existence between and, inline-block before they come out, floating in a big way. Until inline-block it comes out, the float also has its own unique usage scene.

What are the characteristics of floating?

The floating characteristics are embodied in the preceding sentence, do not forget to meditate three times! In addition, the negative effect of floating is one of its characteristics.

Floating will leave the document

Out of the document, which means that floats don't affect the layout of normal elements

Float is out of the document flow

As can be seen, the default three set the width of the block element, would have been a lattice exclusive row, if the box 1 is set to float left/right, he will ignore box 2 and box 3 until the parent element, there is also a risk of covering the ordinary elements .

Floats can be arranged inline

Floats float to the left/right until another floating element is encountered, which is a feature that floats can arrange inline. That is, the float can be set to a wide height, and can be more than one line, is block inline between and between the existence.

Floats can be arranged inline

As you can see, setting floats on multiple elements can achieve inline-block a similar effect, but if each element's height is inconsistent, a "stuck" condition occurs .

Floating will cause the parent element to collapse highly

Floating away from the document flow, this problem has a great impact on the overall layout of the page.

// css.box-wrapper {  border: 5px solid red;}.box-wrapper .box {  float: left;   width: 100px;   height: 100px;   margin: 20px;   background-color: green;}// html<div class="box-wrapper">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

As a result, the floating element is out of the document stream, does not occupy the position of the document flow, and the natural parent element cannot be held open, so there is no height.

Parent element collapses highly

What about that? Then we need to clear the float to solve the high collapse problem!
There are two main ways to clear the float, the clear clear floating and the BFC clear floating, the other you do not have to understand.

Clear how to clear float?

The clear property does not allow floating elements to be cleared on the left/right side of the floating element, and the underlying principle is to add enough clear space to the top or bottom of the element that is cleared to float. This sentence, please meditate 5 times!
Note that we do this by clearing the float on another element, rather than floating the element.

And then the above example, we simply modify the HTML code, as follows

<div class="box-wrapper">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div style="clear:both;"></div></div>

Clear clears floating

The problem of height collapse has been solved, so far, as if floating we can play casually, awesome!

Do not clear floats on floating elements

But someone asked, what happens if we add a clear:both to the third element?

<div class="box-wrapper">    <div class="box"></div>    <div class="box"></div>    <div class="box" style="clear:both;"></div></div>

Do not clear floats on floating elements

Eh After adding Clear:both to the third element, the left and right side of the third element is not next to the floating element, but why is the height still collapsing? Wit you may have found that because the third element is a floating element, out of the flow of the document, even if the third element up and down the clear space, it does not make any sense.

Clear Remove floating best practices

So what's the best practice for clear floating? Take a look at the following code:

// 现代浏览器clearfix方案，不支持IE6/7.clearfix:after {    display: table;    content: " ";    clear: both;}// 全浏览器通用的clearfix方案// 引入了zoom以支持IE6/7.clearfix:after {    display: table;    content: " ";    clear: both;}.clearfix{    *zoom: 1;}// 全浏览器通用的clearfix方案【推荐】// 引入了zoom以支持IE6/7// 同时加入:before以解决现代浏览器上边距折叠的问题.clearfix:before,.clearfix:after {    display: table;    content: " ";}.clearfix:after {    clear: both;}.clearfix{    *zoom: 1;}

Clearfix Clear Float

A word, highly recommended clearfix way to clear the float!

BFC Clear Float

The BFC full name is the block formatting context, which is laid out according to the blocks-level box. We understand his features, triggering methods, and common usage scenarios that are enough.

The main characteristics of BFC

? The BFC container is an isolated container that does not interfere with other elements, so we can solve the vertical margin collapse problem by triggering a BFC of two elements.
? BFC can contain floats, which are often used to solve the problem of the height collapse of floating parent elements.

Among them, BFC clear floating is the use of the "include floating" this feature.
So, how do you trigger BFC?

Trigger mode of BFC

We can add the following properties to the parent element to trigger the BFC:
? floatto left |right
? overflowto hidden | auto |scorll
? displayto table-cell | table-caption | inline-block | flex |inline-flex
? positionto absolute |fixed

So we can set the parent element overflow:auto to simple implementation BFC clear floating, but in order to be compatible with IE best overflow:hidden . However, the element shadows or drop-down menus are truncated and are more limited.

.box-wrapper{  overflow: hidden;}

What are the applicable scenarios for floating? Text Wrapping Effect

This needless to say, floating is originally for text wrapping effect, this is the most basic

Text Wrapping effect Page layout

Floats can be used for regular multi-column layouts, but Inline-block is recommended for personal use.
Floating is more suitable for adaptive multi-column layouts, such as the left fixed width, and the right side is adaptive to the parent element width.

Page layout multiple elements inline arrangement

If previously mentioned, floats can be similar to inline-block arrangement, such as the menu of multiple elements inline arrangement. But Inline-block is recommended for personal use.

Multiple elements inline permutation and a little summary?

Originally just want to talk about floating background, floating problem, floating solution, but really tidy up, and found that a lot of knowledge points need to expand, a lot of things need to rip, a article is hard to say, so only pick some I think the more mainstream more important knowledge written out, if interested can expand themselves.

? The float was originally designed to achieve text wrapping.
? The three characteristics of floating are very important.

1. 脱离文档流。2. 向左/向右浮动直到遇到父元素或者别的浮动元素。3. 浮动会导致父元素高度坍塌。

? The way to resolve the height collapse of the parent element is to clear the float, and the usual method is to clear the float and BFC clear the float and recommend the Clearfix way. Be sure to clarify the underlying principle of clear floating and the specific functions of the clearfix lines of code.
? BFC has its own characteristics, there is a way to trigger BFC, there is not too much to unfold.
? IE6/7 does not support BFC, nor support :after , so ie6/7 clear floating to rely on the trigger hasLayout , understand the next line, after all, IE6/7 is a product of history.

The main purpose of writing these articles is to comb the knowledge points, there is no fixed plan, think of where to write, if you want to know, you can leave a message, I will combine experience to comb the knowledge, and tell you why this, how to do is the best practice.

float and clear floating in CSS, comb it!