I. Standard flow

  • 1.1 Standard stream is the default typesetting mode in browsers;
  • 1.2 Elements are divided into three types in CSS, namely block-level elements/inline elements/inline block-level elements;
  • 1.3 There are two typesetting methods in standard flow. If the element is block-level, it is typesetted vertically. If the element is inline/block-level, it is typesetted horizontally

Floating flow

  • Floating flow is a semi-detached typesetting method from standard flow.
  • The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid (as opposed to absolute positioning).
  • Descriptive utteranceIf you have two block-level boxes and the first one floats left, the second box will run underneath the first one, and the contents of the second box will not be covered by the first box, but will surround it. Float was designed to do the sameBy around;

2.1 grammar

/* Left float */
float: left;

/* Float right */
float: right;
Copy the code

2.2 How are floating elements positioned

When an element floats left, it is moved out of the normal document flow and then shifted left until it hits the border of the container or another floating element. Until the container is full (or full), then move to the next line. (1) Who floats first in the same direction (2Float to the left in different directions, and float to the rightCopy the code

2.3 Floating details

1The left and right outer boundaries of floating elements cannot exceed the left and right inner boundaries of fast (nearest block-level ancestor) elements;2Tongfang floating row up to stick, row not newline, but must be in accordance with the order of the float, left floating to find left floating, right floating to find right floating;3There are three floating boxes, the first two float left, the third float right, float if the first and second is not displayed in a row, the third and the second float in a row right;Copy the code

2.4 Performance after floating

1Semi-de-indexing - will be separated from the document flow, floating, equivalent to forming a new plane; But at the same time, create a special area that allows only other non-floating flow elements to enter the space (consume width and height) and does not allow text entry to be obscured by floating elements.2The floating element will not block the text in the element that is not floating. The text that is not floating will automatically give space to the floating element.3. Clinging phenomenon:1If the parent element is wide enough to display all the floating elements, the floating elements are displayed side by side (the total width of the floating box is less than or equal to the width of the parent box);2If the width of the parent element is not enough to display all floating elements, it will start from the last element (already floating) and lean forward until it finds the parent box.3. If all the floating elements above are not displayed, they will be pasted to the left or right of the parent element.Copy the code

2.5 Clearing floats

  • When do we use clear float?
    • When the parent has no height and the child box floats, which affects the layout below, we should clear the float.
    • The main reason for clearing floats is to solve the problem of the parent element having an internal height of 0 due to child floats.
2.5-1 Extra label method: For those who clear the float, add an extra blank label after it.
  .son {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
        margin-right: 30px;
      }
      .box {
        width: 700px;
        height: 180px;
        background-color: pink;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="box clear"> < /div>
    </div>
  </body>

/* After the float is cleared, the parent element automatically checks the height of the child, whichever is highest; When we add the clear attribute to an element, the margin attribute is disabled. * /
Copy the code
2.5-2 The parent add Overflow property method raises the BFC
Add to parent:overflowFor the hidden |auto| scroll can be implemented. Disadvantages: When the content increases, it is easy to cause that the content is not wrapped automatically, so that the content is hidden, and the elements that need to be spilled cannot be displayed.Copy the code
2.5-3 Clear float with after pseudo-element
The pseudo-element selector is used to add a child element before or after the content of the specified tag.clearfix:after {
	content: "";
	visibility: hidden;/* No need */
	display: block;
	clear: both;
	height: 0;/* No need */
}
.clearfix {
	*zoom: 1; /* IE6, 7 proprietary */} add the class name to the parent element that needs to be cleared of floating effectsCopy the code
2.5-4 Clear float with double pseudo-element
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1; /* Since IE6-7 does not support :after, use zoom: 1 to trigger hasLayout */
}
Copy the code