Note source: Silicon Valley Web front-end HTML5&CSS3 beginners zero basic entry complete version

[TOC]

Height collapse and BFC

1. Height collapse

In a floating layout, the height of the parent element defaults to the height of the quilt element

When a child element is floated, it will be completely removed from the document flow. When a child element is removed from the document flow, it will not be able to support the height of the parent element, causing the height of the parent element to be lost

When the height of the parent element is lost, the elements below it automatically move up, resulting in a chaotic layout of the page

So height collapse is a common problem in floating layout, this problem we must deal with!

Don’t worry, we’ll keep reading

2. BFC

Block Formatting Context (BFC) Block Formatting environment

  • A BFC is one of a CSSImplied attribute, you can turn on BFC for an element
  • Turn on the BFC and the element becomes oneSeparate layout areas

Features of elements with BFC enabled:

  • Will not be overwritten by floating elements
  • The margins of parent and child elements do not overlap
  • Can contain floating elements

There are special ways to turn on the BFC of an element:

  • Float (not recommended) : Obviously the elements below are covered, you can’t float everything

  • Set to inline block elements (not recommended) : No longer monopolizes a row, the width is changed, and there is a bit of space between the elements below

  • Set overflow to a non-visible value: neither overwrites the element, nor preserves the property of the exclusive side (keeping the width), and the initial gap with the underlying element

    A common way to set an element to overflow: Hidden (overflow: Auto is also OK) is to turn on its BFC so that it can contain floating elements

    Overflow: Scroll will have scroll bars, so it is not recommended

    However, there are some problems with this approach, as follows: Overflow does not completely clean up the affected div2 layout

conclusion

  • You can prevent yourself from being covered by floating elements by becoming a floating element.
  • Inline blocks can be set to prevent themselves and other elements from being overwritten by floating elements.
  • You can set theoverflowProperty, including floating elements (both “for one” and “for all,” but still flawed)

Open the Zeal manual (02- Preparation for Front-end Development) and check out the documentation that explains the BFC

After opening the Block Formatting Context module, you can see that there are many ways to start the BFC

Here I have roughly translated and sorted out a table, which should be more intuitive (some concepts have not been learned yet, please forgive me for mistakes in translation and understanding).

Element or attribute instructions
<html> Document root element
float: left

float: right		 Float element (floatDon’t fornone)
position: absolut

position: fixed		 Absolute location element
display: inline-block Inline block elements
display: table-cell Table cells, default
display: table-caption Table title, default
display: table

display: table-row

display: table-row-group

display: table-header-group

display: table-footer-group

display: inline-table		 Anonymous table units that are the default values for THE HTML table, table row, table body, table header, and table footer
overflow: hidden

overflow: scroll

overflow: auto		 overflowDon’t forvisibleandclipThe block element
display: flow-root
contain: layout

contain: content

contain: paint
display: flex

display: inline-flexThe immediate child of		 Flex items if they are neitherflex, nor is itgridortableThe container
display: grid

display: inline-gridThe immediate child of		 Grid items if they are neitherflex, nor is itgridortableThe container
column-countDon’t forauto

column-widthDon’t forauto		 The Multicol container containscolumn-count: 1
column-span: all You should always create a new formatting context, even thoughcolumn-span: allThe element is not in the multicol container

However, be aware that either way, there are pitfalls, drawbacks, or side effects

3. clear

Let’s design three sibling elements and set the first two elements to float and see what happens

Box1 floats, causing box3 to move up. That is, box3 is affected by box1’s float and its position is changed.

If we do not want an element to change position due to the floating influence of other elements, we can use the clear attribute to clear the floating element’s influence on the current element

Clear: Clears the floating element’s effect on the current element (essentially adding a margin-top attribute to the element, calculated by the browser automatically)

Optional value:

  • leftClears the influence of the floating element on the current element
  • right Clears the floating element on the right of the current element
  • bothClear the influence of the larger element on both sides (note that this is not done at the same time)

4. after

After learning the above knowledge, we understand the solutions to the height collapse problem, which are mainly as follows

  • BFC can be turned on for elements through overflow: Hidden, etc

  • You can clear float effects on elements by using clear: both, etc

At the same time, we also know that these two ways have certain drawbacks and hidden dangers. Is there a better way to solve the height collapse problem?

The answer, of course, is yes!

Let’s go straight to the renderings

Q1: A pseudo-element selector is used here::afterWhat’s the difference, one might ask, from defining box3 directly under box2?

A: As we know, the idea of web page structure is: structure + performance + behavior. Define a box3 structure directly under box2. Using a pseudo-element selector, however, is presentation

The height collapse problem is a presentation problem. The purpose of defining box3 is to support the content of Box1, which belongs to the presentation, not the structure. Therefore, defining :: After in CSS is more in line with the programming idea of web pages

Q2: Why is it neededdisplay: block?

A: Because by default, the ::after pseudo-element is an inline element, if not converted to A block element, it will still not hold up to box1

5. clearfix

We discussed the problem of overlapping margins in vertical layouts in the previous section of 06- Box Models: adjacent vertical margins overlap

As shown in the figure above, after the child element sets a margin-top, the parent element moves along with the child element

That’s the adjacent margin between the parent and the child, which is passed to the parent (upper margin).

The smart guys have already figured out how to use the pseudo-element selector

Okay, so let’s see what happens

Nothing seems to have changed. What’s wrong with it?

Let’s review the mental process of using after pseudo-elements:

  • Use content-free box3 to prop up Box1 == instead of structure (::afterInstead of box3)
  • clearClear float effects on elements (rememberclearHow does it work?

The element is given a margin-top property, but this is not visible in the developer tools

In this case, it is equivalent to adding a box3 under box2 and giving box3 a margin-top property

That’s it.

∵ Adjacent vertical margin This condition is still satisfied

The conclusion that Lao can overlap still holds

In particular, adjacent margins between parent and child elements are passed to the parent (upper margin) as box1 and box2 move down in sync

So what can we do to solve this problem? With your simple feelings, how should be judged? Of course is to let the above conditions do not meet bai!

How can you not be satisfied? The vertical margins of two elements are not adjacent.

Well, there’s no point in talking, let’s go straight to the code and see what happens!

We used the before pseudo-element selector, which of course aims to keep box1 and Box2 from having adjacent margins, but it doesn’t seem to work

Let’s switch to the display: inline-block property

It seems to solve the layout problem of the parent element, but why does the child element go down some distance? Who gave it the courage?

Because inline-blocks are both inline elements and block elements, you can set the width and height without monopoling a row

When the width is not set, there is a default height, so inline-block still doesn’t work

There’s another property, display: table

Bingo! That’s what we’re looking for in the end

Q1: Why not use the clear attribute?

A: Didn’t I? Clear is to clear the effect of floating on the layout, we do not have floating elements, we are not talking about floating issues

Q2: No, there’s another onenoneProperties? Why not?

A: The none attribute does not occupy position, but it does not separate adjacent elements’ margins

Q3: Why?tableStudent: Is that ok?

A: That’s A very good question. We mentioned this property above when we talked about some of the methods to enable the BFC. Also, keep in mind that one of the features of an element when BFC is turned on is that the margins of parent and child elements do not overlap. Of course, the pseudo-element selector needs to be properly selected so that the margins are not adjacent

Also, to sum up:

  • Height collapse problem, generally used::after
  • Margin overlap problem, generally used::before

I don’t know if you can figure out these two things at this point

So the question is, is there a way to solve both height collapse and margin overlap?

B: of course! The Clearfix style solves both height collapse and margin overlap

When you encounter these problems, just use the ClearFix class, which can help you solve the two problems of CSS easily

.clearfix::before..clearfix::after{
    content: ' ';
    display: table;
    clear: both;
}
Copy the code

Clearfix ::before is used to solve margin overlap

.clearfix::before{
    content: ' ';
    display: table;
}
Copy the code

.clearfix::after is used to solve the height collapse problem

.clearfix::after{
    content: ' ';
    display: table;
    clear: both;
}
Copy the code

Together, they can solve the two “problems of the century” : height collapse and overlapping margins