This is the fifth day of my participation in Gwen Challenge

CSS can use

or as a box for content. We know that

is a block-level element, and content is a single line. < SPAN > is an inline element. If I now need to display two types of content on a single line and want to set its width and height, I can float the

block-level element to achieve the desired effect.

CSS uses the float property to float. A floating element generates a block-level element (whether it is itself an inline element or a block element).

floatAttribute values describe The instance
left Element floats to the left float: left;
right Element floats to the right float: right;
none By default, the element does not float float: none;
inherit Inherits from the parent elementfloatThe value of the attribute float: inherit;

First look at the difference between floating styles in the browser:

The instance

float_test1.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float_test1</title>
    <link rel="stylesheet" href="float_test1.css">
</head>
<body>
    <div class="outer1">
        <div class="block1">The first div</div>
        <div class="block2">Div that wants to be on the same line as the first div</div>
    </div>
</body>
</html>
Copy the code

float_test1.css

.outer1 {
    width: 800px;
    margin: 50px auto;
    border: red 1px solid;
}
.block1 {
    height: 60px;
    width: 300px;
    background-color: #d093d8;
}
.block2 {
    height: 60px;
    width: 300px;
    background-color: #a6d5a9;
}
Copy the code

No floating effect:

Add floating float: left to both.block1 and.block2 selectors;

Results as follows:

The two divs are displayed on one line, but they don’t split the outer1 container. Outer1 is now in the document flow, but there are no more elements in outer1, so its height is now 0. So what is document flow? Let me show you a picture:

Floating elements leave the document flow and are displayed in the upper layer of the document flow. Floating elements default to the same floating layer.

Left float is the left of the parent element after it floats, and right float is the right of the parent element after it floats.

If I wanted to create a new div with a bit more height and width than the first two div’s, the code would look like this:

float_test1.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float_test1</title>
    <link rel="stylesheet" href="float_test1.css">
</head>
<body>
    <div class="outer1">
        <div class="block1">The first div</div>
        <div class="block2">Div that wants to be on the same line as the first div</div>
        <div class="block3">The third div</div>
    </div>
</body>
</html>
Copy the code

float_test1.css

.outer1 {
    width: 800px;
    margin: 50px auto;
    border: red 1px solid;
}
.block1 {
    height: 60px;
    width: 300px;
    background-color: #d093d8;
    float: left;
}
.block2 {
    height: 60px;
    width: 300px;
    background-color: #a6d5a9;
    float: left;
}
.block3 {
    height: 100px;
    width: 400px;
    background-color: #ffaa91;
}
Copy the code

It will look like this in the browser:

The third new div ran to the bottom, contrary to my desire to display them side by side.

You need to clear the float to make the third div fully visible. There are several ways to clear the float:

Clear floating method 1

Add an empty tag horizontally behind the float element and set clREA: both to the empty tag. Properties.

Results as follows:

The idea behind this method is to close the parent element of the floating element and not allow the floating element to go beyond the parent element to the left or right or left. The parent element is the same height as the highest height of the child box.

clearAttribute values describe The instance
left Floating is not allowed on the left side clear: left;
right Floating is not allowed on the right side clear: right;
both Floating is not allowed on the left or right side clear: both;
none Allows floats to appear on the left and right clear: none;
inherit Inheriting from the parent elementclearAttribute values clear: inherit;

This method is easy to understand, but adds a meaningless empty tag and is not recommended.

Clear floating method 2

Add overflow: Hidden to the parent element that you want to clear the float; Style and make the newly added element level with the parent element to clear the float. Clear the float by triggering the BFC.

Results as follows:

When the size of the child element exceeds the size of the parent element, you can use the overflow property to set how the parent element displays the overflow child element.

overflowAttribute values describe The instance
visible By default, the child element is not clipped and appears outside the parent element box with the height or width set. No clipping and no scroll bar overflow: visible;
auto Do not display excess child elements, do not crop child elements, add vertical or horizontal scroll bars as appropriate, can also be used to clear floats overflow: auto;
hidden Child elements are clipped, the clipped content is not visible, and can also be used to clear float and clearmargin-topcollapse overflow: hidden;
scroll Do not display excess child elements, do not crop child elements, add vertical and horizontal scroll bars, also used to clear floats overflow: scroll;

Advantages of this method: it is convenient, but it is possible to crop out useful child elements such as long content without newlines. It is not recommended.

Clear floating method 3

To reduce unnecessary empty tags (method 1), add ::after pseudo-elements to the parent element that you want to clear the float and set content””; display: block; clrea: both; Properties. And make the newly added element level with the parent element to clear the float.

Effect :(same as method 2)

The characteristics of this method: in line with the idea of closed float, recommended.

A problem in the process

When the third div is added, the box of the third div is overwritten, but the text content of the third div is not overwritten by the first two divs that leave the document flow, because the box in the document flow ignores this element when float is used to leave the document flow. But the text content inside the box in the document flow will still make room for this element, surrounding it.

Why is this mechanism? That’s because float positioning was originally intended to work on an image, with text surrounding the image. And because any element can float, so it is widely used in various elements. If you want to make both the box in the document flow and the text inside the box ignore the restriction of leaving the floating element, you can use position: absolute; Instead of float: left; .

Points to be aware of

  • Float elements out of the document flow but still in the DOM tree.
  • Clear the pseudo-element added in float method 3 that is not in the DOM tree.