Height of collapse

The child elements of the parent block level element all have BFC enabled, which makes it impossible to split the parent element, resulting in a high collapse. In a div, there are two P tags, and the p tags are set to float, and the div will collapse in height.

BFC

The BFC block formatting context, which is part of the visual CSS rendering of a Web page, is the area where the layout process of the block box takes place and where floating elements interact with other elements.

Floats locate and clear floats and margin overlaps

MDN is referenced here: the block formatting context is important for both locating floats (see float) and clearing floats (see clear). Float location and clear float are only applied to elements in the same BFC. Floats do not affect the layout of elements in other BFC, and clearing floats only clears floats of elements before it in the same BFC. Margin collapsing also occurs only between block-level elements that belong to the same BFC.

The common methods for creating a BFC are as follows:

  1. ** Root element ‘HTML’ **
  2. ** Inline block elements (element display is inline-block) **
  3. Elastic elements (display is a direct child of flex or inline-flex elements)
  4. ** element (float of element is not None) **
  5. Overflow value is not for visible block elements **
  6. Absolutely locate the element (element’sposition 为 absolute 或 fixed)

Solution to height collapse

1. Use empty elements with clear attributes (must be block-level elements)

Under the two float elements, add a new element to expand the width of the parent element, clear the previous float left and right, and move it down to expand the height.

.clear_both { clear: both; } < div class = "container" > < p class = "left" > floatrightfloatrightfloatrightfloatright, Floatrightfloatright </p> <p class="right"> Read-only branch: No one can push code (including administrators and owners). If you need to push code, it should be set to the "normal" or "protected" branch </p> </div>Copy the code

Advantages: Simple, less code, good browser compatibility. Cons: Need to add a lot of non-semantic HTML elements, code is not elegant, not easy to maintain later.

2. The overflow property

Add overflow properties to the container of floating elements, with values that are not the default, such as hidden, and in IE6 you also need to trigger hasLayout, such as setting the container width or zoom:1 for the parent element.

The principle of overflow clearing float is here.

.container {background-color: antiquewhite; border: steelblue 1px solid; overflow: hidden; zoom: 1; }Copy the code

3. Add a float to the container of float elements

Adding a float attribute to the container of a float element clears internal floats, but this will make it float as a whole, affecting the layout and is not recommended.

4. Use the CSS pseudo-element after

The principle is similar to that of the first empty element.

.container {background-color: antiquewhite; border: steelblue 1px solid; } .container::after {content: ""; display: block; clear: both; }Copy the code

It is recommended to use CSS pseudo-element after to solve the height collapse problem, which has fewer side effects and is easy to maintain, but the browser compatibility is general.