Recently, I overturned my car again in class. When I talked about floating, I had promised to talk about two classes, but I found that I only used half a class and ended it. In the final analysis, I did not have a thorough understanding of floating.

Combined with a few articles on floating, plus some documentation from MDN, I finally have some understanding of the ins and outs of floating. The following is for reference only.

This article makes a detailed description of floating from the following aspects:

  1. What is floating?
  2. The history of floating?
  3. The purpose of the float?
  4. What are the effects of floating?
  5. How do I clear the impact of floating?

What is floating?

First let’s look at the definition of floating on MDN:

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid (as opposed to absolute positioning).

This sentence illustrates two functions of floating:

  1. Specifies that the element is placed along the left or right side of its container
  2. Allow text and inline elements to surround it

The first of these is the one we use most often: to enable elements (specifically, block-level elements) to be arranged horizontally, left and right.

The second feature is something that you probably don’t encounter very often.

The calculated value of the float

Float elements are elements whose computed value of float is not None.

This is an interesting sentence, and I didn’t understand it at first. In fact, there is another sentence at the end:

Since float implies the use of a block layout, it modifies the computed value of the display value in some cases.

The float element is an element whose display value has been changed after a float is used. This element’s display value is not None.

Float works on all elements whose display is not None.

Float the calculated value

MDN lists the calculated values of display:

Specify a value Calculated value
inline block
inline-block block
inline-table block
table-row block
table-row-group block
table-column block
table-column-group block
table-cell block
table-caption block
table-header-group block
table-footer-group block
flex Flex, but float has no effect on such elements
inline-flex Inline-flex, but float has no effect on such elements
other unchanged

Most of the match(/table/g) attribute values have never been seen before, let alone used. But that doesn’t affect what follows.

In practice, computed values are more of an inline-block feature.

Also, using floats in flex layouts does not work.

Float the property value

Notice what I just saiddisplayProperty value changes under the influence of float.

Let’s look at the value of the float property:

  1. Left indicates the keyword that the element must float to the left of the block container in which it resides.
  2. Right indicates the keyword that the element must float to the right of the block container in which it resides.
  3. None indicates that the element is not floated.
  4. The inline-start keyword indicates that the element must float on the beginning side of the block container to which it belongs, left in LTR scripts and right in RTL scripts.
  5. The inline-end keyword indicates that an element must float on the end side of its block container, to the right in LTR scripts and to the left in RTL scripts.

Left and right are two of the most commonly used attribute values, inline-start and inline-end, which many people have not seen at all, but will be familiar with.

Yes, they are similar to flex-start and flex-end, and even arranged in a similar way.

example

As we mentioned earlier, when an element floats, it is moved out of the normal document flow, and then shifted left or right until it hits the border of the container it is in, or another floating element.

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>
Copy the code
section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}
Copy the code

Direct look at:

As you can see: 1 and 2 on the left and 3 on the right, which fits the first function we mentioned above. The text then wraps around the image, fulfilling the second function.

Unexpectedly ~ and word inside the text surround is somewhat similar.

The history of floating?

You don’t know the original intention of floating

The float property was originally introduced to allow Web developers to implement a simple layout that consists of an image floating in a column of text, with text wrapped around it to the left or right.

A problem many people encounter when they first learn to float is that the upper element floats, causing the lower element to move up and be covered by the upper element, while the text of the lower element is not covered:

Most people think of this as a bad consequence of floating, but that’s what floating is all about, letting the text wrap around the image (and other elements, too).

It’s not just images floating around

Web developers quickly realized that anything could float, not just images, so the use of floats expanded.

If the float is only used for text surround images, it’s really a bit of a stretch. Look at a chestnut:

The first sink function, using float is really too convenient:

.box3::first-letter{
	font-size: 2rem;
	float: left;
}
Copy the code

In the end the development

As stated in the previous chestnut picture: Floating has been used to make web pages layout so that information can be arranged horizontally, but with the development of CSS and the emergence of better layouts such as Flex, many people no longer use floating layouts, but I think flex is not really necessary in most cases and floating layouts are still a good solution.

What is the purpose of floating?

The above development history has made a detailed explanation of the purpose of floating, summarized as follows:

  1. Originally designed for text around pictures
  2. To be able to arrange page elements horizontally

As for the case of sinking the first word mentioned above, it belongs to some clever usage, not in the actual purpose.

Floating impact

The difference between floating and positioning

We usually say that floating is out of the document flow, positioning is out of the document flow.

But is the float completely out of the document flow?

After reading the above, you can actually see that the float is not out of the document flow, or completely out of the document flow.

Why is this happening?

Or because of the original intention of floating: to achieve text surround.

The actual float is used to wrap the text around the image, creating an effect that the developers probably didn’t initially expect to be used on the layout.

The collapse caused by the surrounding text makes it feel like the float is out of the flow of the document.

Take a look at absolute positioning

.box1{
	width: 900px;
	height: 200px;
	background-color: red;
}
.box2{
	height: 500px;
	width: 800px;
	background-color: blue;
	color: white;
	position: absolute;
	top: 0;
}
Copy the code

You’ll notice that the location is really out of the flow, and the blue block covers everything below, including the text.

The floating element of internal and external troubles

Since the float is not completely out of the document flow, the semi-out of semi-normal state certainly has a significant impact.

Take a look:

This is the original layout without floating.

Purple and orange are the siblings, and red and blue are the siblings of purple:

<div class="box1">
	<div class="box1-1"></div>
	<div class="box1-2"></div>
</div>
<div class="box2"></div>
Copy the code

When we add a left float to red:

And what you see is that the red and the blue overlap, and the purple gets smaller.

This is the first effect: the parent element collapses in height as the float changes the position of the sibling element

Then set the float to blue:

! [Floating impact 3.png](

This is the problem, the purple parent disappears, and the red and blue collapse into the orange region.

This is the second effect: it causes the offspring of the parent element to collapse and affects the text in the orange area.

The summary is:

  1. Influence peer elements
  2. Influence parent element
  3. Sibling elements that affect the parent element

It can really be described as internal troubles and external troubles ~~

How to resolve the impact of floating?

I can’t believe you didn’t use this method

If you’re dealing purely with the effects of a float, you could write it like this.

<div class="box1" style="height: 100px;">
	<div class="box1-1"></div>
	<div class="box1-2"></div>
</div>
Copy the code

Given that the heights of box1-1 and box1-2 are fixed (normally the height of an element is fixed), setting a larger value for the parent element solves this problem

Of course, this is written to play, do not apply to the actual.

The real way to clear the float

**clear** specifies whether an element must be moved (after clearing the float) below the float element before it. The clear property applies to both floating and non-floating elements.

The clear property is described here without further details.

About specific clear float method, see clear float four kinds of way and its principle understanding, thank big guy.

First, the end result we want:

Red and blue are displayed together, and the purple parent element should have a height support, while the orange below is unaffected.

Here’s where to clear the floating clear property.

1. Overflow clear float

This is a special one. If you want to understand it, you need to know BFC first. As the blog above said, if you want to explain this concept clearly, I’m afraid it will take a very long time, so you need to see the above.

2. Use the Clear style

This method is used sparingly and simply adds the clear attribute to the affected element.

For example, if div1-2 is affected, add clear to div1-2:

<div class="box1">
	<div class="box1-1"></div>
	<div class="box1-2"></div>
</div>
<div class="box2">qwertyuiop qwertyuiop qwertyuiop</div>
Copy the code
.box1{
	background-color: violet;
}
.box1-1{
	width: 200px;
	height: 100px;
	background-color: red;
	float: left;
}
.box1-2{
	width: 300px;
	height: 100px;
	background-color: blue;
	float: left;
	clear: both;
}
.box2{
	width: 600px;
	height: 500px;
	background-color: orange;
}
Copy the code

You’ll notice that the layout is even more confusing, but the effect is obvious:

The float on the left of blue div1-2 is cleared, causing him to change a line, while the rest of the content is unchanged.

Of course, this is clearly not what we expected. But this time can actually guess, is it possible to add orange clear property implementation?

Try it on:

<div class="box1">
	<div class="box1-1"></div>
	<div class="box1-2"></div>
</div>
<div class="box2" style="clear:both">qwertyuiop qwertyuiop qwertyuiop</div>
Copy the code

At first glance, the function appears to be implemented, but on closer inspection, the orange is unaffected, but the purple parent element is missing and has no height.

This is because box2’s cleanup float simply clears itself of the effects that box1 is still affected by, so this approach can cause some problems.

3. Insert clear floating block-level elements before parent element closing tag

This method is called the extra label method, and it’s also misleading. The key is, where do you put the extra labels?

It’s not uncommon for someone to write:

<div class="box1">
	<div class="box1-1"></div>
	<div class="box1-2"></div>
</div>
<div style="clear:both"></div>
<div class="box2" style="clear:both">qwertyuiop qwertyuiop qwertyuiop</div>
Copy the code

Most of the time, this is fine, but look at the actual effect:

As in the above case, the effect is achieved, but the height of the parent element is not raised, so there is still a problem.

So what’s the right way to write it?

Like this:

<div class="box1">
	<div class="box1-1"></div>
	<div class="box1-2"></div>
    <div style="clear:both"></div>
</div>

<div class="box2" style="clear:both">qwertyuiop qwertyuiop qwertyuiop</div>
Copy the code

Inside the floating element parent, positioned after the last floating element.

This is the function we need, nothing wrong ~

4. Leverage pseudo-elements (Clearfix)

Even if it did, it would still not be desirable because of the additional tags, page load, and code readability.

Pseudo-elements are used to implement:

.clearfix:after {
    content: ' ';
    height: 0;
    display: block;
    clear: both;
}
Copy the code

The pseudo-element loads the floating element’s parent:

<div class="box1 clearfix">
	<div class="box1-1"></div>
	<div class="box1-2"></div>
</div>

<div class="box2" style="clear:both">qwertyuiop qwertyuiop qwertyuiop</div>
Copy the code

That’s what we need to do. Let’s go to the browser and look at the pseudo-element:

As you can see, the position of the pseudo element is at the end of the parent element of the floating element.

summary

To sum up, the effects of float on different elements need to be dealt with in different ways, rather than in a single way. And finally, a chestnut:

<div class="box1 clearfix"> <div class="box1-1"></div> <div class="box1-2"></div> <div class="box1-3"></div> </div> <div  class="box2" style="clear:both">qwertyuiop qwertyuiop qwertyuiop</div>Copy the code
.box1-3{
	width: 300px;
	height: 100px;
	background-color: yellow;
}
Copy the code

Create a new float without box1-3, if you want to try it out, there is no diagram here, in this case box1-3 is overwritten by the first two float elements, what to do? Using the second method, add a clear:both or clear:left to box1-3.

About clearing float corresponding method:

  1. If the child element floats, the effect on the sibling element of the parent element is removed by adding a pseudo-element to the parent element
  2. If a floating element affects a sibling, add the clear attribute to the sibling.

At the end of the article: if forward or quote, please post the original link, thanks big guy. This article may have some mistakes, welcome comments pointed out, also welcome to discuss. Please forgive me if the article may not be good enough. In order to teach, I also fuck broken heart, life is short, I learn the front, a little more contribution, more than a separate heart ~

Read the original

Reference documentation

  1. Clear float four kinds of way and its principle understanding
  2. Probably the most comprehensive and understandable analysis of front-end floats
  3. clear
  4. floating
  5. float