CSS float

The attribute involved here is float, and its value can be assigned as:

left: The element floats to the left right: element floats to the right none: no floating inherit: Inherit floating properties from the parent

There is also the clear property: Mainly used to remove floating attributes in all directions (including inherited attributes)

Let’s first create a basic html and CSS file. The following is the basic content:

html:

   <div class="qd"></div>
    <div class="wd"></div>
    <div class="ed"></div>

CSS

.qd{    width: 100px;    height: 100px;    background-color: lightskyblue;
}.wd{    width: 100px;    height: 100px;    background-color: lightseagreen;
}.ed{    width: 100px;    height: 100px;    background-color: lightsalmon;
}

The following is the display effect:

On this basis we all add float Properties, the first two go to the left, the last one to the right, see what the effect will be:

float: left;float: right;

Rendering

Just like a few small things running in a room, you can specify the direction in which they run, and they will run to the border. For testing, we might as well limit a space for them (put all three divs into one div) ).Like this:

<div class="container">
    <div class="qd"></div>
    <div class="wd"></div>
    <div class="ed"></div>
</div>

The next thing you will see is:

But sometimes we don’t need floats, like As shown below, we want to add a sentence below the above effect, and then we directly add a

<div class="text">hello php</div>

in the container. Then we will see

.text{    clear: both;
}