CSS-six solutions for clearing float and six solutions for css

CSS-six solutions for clearing float and six solutions for css

The height of the content boosts the height of the parent element container, as shown below:


The HTML and CSS codes are as follows:





After the p tag is added with a float, p {float: left;}. In this case, the DIV collapsed and the two sections are displayed in the same row. The effect is as follows:



 Solution 1: Set the height for the previous parent Element
　　　　　　
! In enterprise development, writing is not required without writing height, so this method is rarely used.



Solution 2: Add the clear attribute to the following box;
　　　　　　　
! After a clear attribute is added to an element, the margin attribute of this element becomes invalid.

The CSS code is as follows:
　　　　　　






Solution 3: Exterior wall method. add an extra block-level element between the two boxes and set the clear: both attribute for the added element.

! The following box can use the margin-top attribute, but the above box's margin-bottom attribute is invalid. In actual use, you can directly set the height of the added block-level element, so that the upper and lower boxes have margins.

The HTML code is as follows:
　　　　　







The effect is as follows:



SolutionSolution 4: Add an extra block-level element at the end of all the sub-elements in the first box, and set the clear: both attribute for this additional block-level element.
　　　　　　　　
! The margin-bottom attribute can be used for the first box, or the margin-top attribute can be used for the second box.
　　　　　　　
The HTML code is as follows:



Effect
　

The height of the first box is held up and the background color is displayed. However, this method is not recommended in development because additional elements are added.



Solution 5: Use pseudo elements to add block-level elements to clear floating
　
The Code is as follows:
　


The effect is as follows:

　　　　　　
Solution 6: Overflow: hidden; 1. You can crop content beyond the tag range.
2. Clear floating
3. Two nested boxes, so that the box inside is not topped when margin-top is set.


The Code is as follows:

 

At the same time, the above box's margin-bottom and the lower box's margin-top can be used normally.

Effect