Review the front-end basics-css float and clear float, and review the front-end-css float

Review the front-end basics-css float and clear float, and review the front-end-css float

What is the concept of Document Stream? In which way can elements be moved out of the Document Stream?

• Document Stream refers to the stream arrangement in which elements are automatically arranged from left to right and from top to bottom during element layout. Finally, the form is divided into rows from top to bottom, and elements are discharged from left to right in each row. If you leave the Document Stream, the elements disrupt the arrangement or take it away from the layout.
• Elements can be moved out of the document stream through floating and locating.

In CSS, the float attribute is used to float elements.

A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.

Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

The following are the effects of floating elements.

 

Clear floating refers to: In a non-IE browser (such as Firefox), when the container has a fixed height and the container content contains floating (float is left or right) elements, in this case, the height of the container cannot be automatically extended to adapt to the height of the content, so that the content overflows outside the container and affects the layout, to prevent the occurrence of this phenomenon, CSS processing is called clearing the float.

One of the methods to clear the floating:

Using the clear attribute, clear has three attribute values: left, right, both, none, inherit.

1. Use an empty element with the clear attribute

2. Use a pseudo element and clear: both in the pseudo element;

3. Add overflow: hidden or overflow: auto to the parent element. In addition, hasLayout needs to be triggered in IE6. For example, set the container width and height for the parent element or set zoom: 1.