In-depth analysis of the unexpected "floating trap" in Chapter 4 of CSS-reading notes

tags: HTML\CSS css html html5 css3

4.3 Unexpected "floating trap"

The third box appeared on the right, causing a very large blank space under the first box. This is because the browser will place the floating element as high as possible.
If the height of each floating box is different, the final layout may be ever-changing. In the same way, changing the width of the browser will have the same result, because it will cause line breaks and thus change the height of the element. What we really want is two floating boxes per row.

solution:

Clear the float above the first element of each row. Since it is known that there are two boxes in each row, you only need to clear the float in the row above the odd-numbered element of each row.

Add margins to media elements

The previous owl selector will also add a top margin to each element except the first element, because this will cause the elements in the first row to be unaligned, so you need to reset the top margin of the media element.

Intelligent Recommendation

In-depth analysis of CSS Chapter 3 element width issues-reading notes

3.1 The problem of element width How to build the following simple web page? Write HTML first Write basic style CSS code Explain that because IE has a bug, it will default to<main>Elements are r...

In-depth analysis of the fourth chapter of CSS grid system-reading notes

4.5 Grid System The reusability of code can be improved with the help of grid system The grid system provides a series of class names that can be added to the markup to structure a part of the web pag...

In-depth analysis of the element spacing in the container in the third chapter of CSS-reading notes

Element spacing in the container Add two social buttons to the sidebar Set the size, font, and color of the sidebar buttons At this time, they are stacked directly on top of each other without margins...

In-depth analysis of CSS Chapter 5 Flexbox principles-reading notes

5.1 Principles of Flexbox Add to the elementdisplay:flex, The element becomes aFlexible container(Flex container), its direct child element becomesElastic sub-element（flex item） The height of the elas...

In-depth analysis of CSS Chapter 2 custom attributes-reading notes

Custom attributes Declare a variable, assign a value to it, and then refer to this value elsewhere in the style sheet, which can reduce duplication in the style sheet example: Define a custom attribut...