Example code for mixing float and margin in CSS

In my recent studies, I found some layout exercises on GitHub, and I found that I was super unfamiliar with layout (very uncomfortable).

In my previous studies, I felt that using CSS was OK as long as I remembered the functions of each attribute, but what about it? It's really embarrassing. I won’t say any more, it’s too sad, let’s get to the point!

I've been working with float and margin layouts lately and it's really deepened my understanding of how these two can be used together. (New students can take a look, experts please ignore)

The float property

float: left | right | none | inherit

Of course, the most commonly used are the first two: floating left and floating right

The most important feature of floating: label removal.

It deviates from the standard flow and is at a more advanced level, affecting the layout of the parent element and subsequent elements. I will not go into detail here.

Margin Property

Here we mainly talk about margin-left and margin-right

margin-left: Sets the left margin of an element.
margin-right: Sets the right margin of an element.

In general, it is easy to understand the literal meaning of these two attributes, but the simpler things are, the more you should not underestimate them.

Key Points

The following code:

html:

<div class="box">
    <div class="zi_box1">1</div>
    <div class="zi_box2">2</div>
    <div class="zi_box3">3</div>
    <div class="clear"></div>
</div>

CSS:

.box {
            background-color: #555555;
            width: 600px;
            height: 200px;
        }
        .zi_box1 {
            float: left;
            background-color: #c23232;
            width: 200px;
            height: 100px;
        }
        .zi_box2 {
            float: left;
            background-color:chartreuse;
            width: 200px;
            height: 100px;
        }

        .zi_box3 {
            float: left;
            background-color: blue;
            width: 200px;
            height: 100px;
        }
        .clear {
            clear: both;
        }

The final effect diagram:

The three child boxes fill the parent box, but their width can be stretched inside the parent box.

What if the parent box can’t be expanded?

Increase the width of a subbox, box number 3

zi_box3 {
    width: 300px;
}

The effect diagram is as follows:

Then the third box will start on a separate line.

When used in conjunction with margin

Based on the first code, add a margin value

zi_box1 {
    margin-left: 20px;
}

At this time, since the width of the three boxes plus the margin value is greater than the width of the parent box, box 3 will start a new line.

On the contrary, if a margin value is set for box 3, and no margin is set for box 1 and box 2, will box 3 also start on a separate line? The answer is yes, because their width has exceeded the value of the parent box.

Implementing a three-column layout

How to make the order box 3, box 1, box 2 without changing the order of DOM? Can we make full use of the margin attribute? I was an idiot at the beginning (I seldom practice layout, so please don’t criticize me, I’m just a rookie)

Idiot Code

.zi_box1 {
     margin-left: 200px;       
}
.zi_box2 {
     margin-left: 200px;       
}

.zi_box3 {
     margin0left: -400px;
}
//It is a naive idea here to think that each element acts independently

The effect diagram written like this:

I was stunned at that time, what the hell was this.

But in the final exploration, I know the reason. The most important thing is the execution order of DOM.

The reason for this is: box 1 is parsed first, margin-left: 200px, so box 3 goes to the second line; then box 2 is parsed, margin-left: 200px, so box 2 also goes to the second line, because the first line is already 600px wide. Finally, let’s analyze box 3, margin-left: -400px, and the box moves forward 400px, which results in the following effect.

Thinking this way means considering the whole picture instead of the whole picture.

Final code to implement three-column layout

.zi_box1 {
     margin-left: 200px;       
}
.zi_box2 {
     margin-left: 0px;      
}

.zi_box3 {
     margin0left: -600px;
}

Rendering

It can be simply understood like this

If box 1 moves 200px to the right, then box 2 and box 3 will also move 200px to the right. The specific effect diagram is as follows

So if box 3 moves to the front, does it need a distance of 600px? (Isn’t it easy to understand? Hehe) Of course, this is only my partial understanding and it is not completely correct.

Then float: right and margin-right are the same.

Summarize

This is the end of this article about the mixed use of float and margin in CSS. For more relevant content on the mixed use of CSS float and margin, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!