Clear CSS float, css float

Clear CSS float, css float
CSS clear Floating Method 1. Give the parent a height attribute

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */height: 200px ;}. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

Principle: manually defining a height for the parent div solves the problem that the parent div cannot automatically obtain the height.

Advantage: simple and less code.

Disadvantage: It is only suitable for fixed height la S and must be accurate.

2. Add an empty div label at the end to give the empty div clear: both attribute.

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red }. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD}/* clear floating Code */. div {clear: both} -- * clear empty div used for floating * -- </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> <div class = "div"> </div> <div class = "div2"> div2 </div>

Principle: add an empty div to the front and clear the floating with clear: both

A bit: simple, less code, good browser support

Disadvantages: not easy to understand, not conducive to layout

3. Define a pseudo class for the parent: after

<Style>. div1 {border: 1px solid red; background-color: green;}/* clearing floating code is equivalent to adding an empty div to div1 */. div1: after {content: ""; clear: both; display: block ;}. left {width: 20%; height: 200px; float: left; background-color: red ;}. right {width: 30%; height: 100px; float: right; background-color: skyblue ;}. div2 {background-color: black; border: 1px solid yellow ;}</style> 
Principle: It is equivalent to adding a child level to the parent level (empty div, clear: both attribute, and content must be included, even if the content is empty)
Advantage: the browser supports good behavior and is not prone to strange problems.
Disadvantages: the code is too large to be easily understood by beginners.
4. Define overflow: hidden for the parent level
<Style>. div1 {border: 1px solid red; background-color: green;/* clear floating Code */overflow: hidden ;}. left {width: 20%; height: 200px; float: left; background-color: red ;}. right {width: 30%; height: 100px; float: right; background-color: skyblue ;}. div2 {background-color: black; border: 1px solid yellow ;} </style> 
Principle: width must be defined, and height cannot be defined. The over: hidden browser is used to automatically detect the height of floating elements.
Advantage: less code
Disadvantage: if the child level is a positioning element and the Child Level Width is greater than the parent level, extra content will be hidden.
5. Define overflow: auto for the parent
<Style>. div1 {border: 1px solid red; background-color: green;/* clear floating Code */overflow: auto;}/* The Child width cannot exceed the parent width, otherwise a scroll bar will appear */. left {width: 20%; height: 200px; float: left; background-color: red ;}. right {width: 30%; height: 1000px; float: right; background-color: skyblue ;}. div2 {background-color: black; border: 1px solid yellow ;} </style> 
Principle: width must be defined, and height cannot be defined. Use the over: auto browser to automatically detect the height of floating Elements
Advantage: less code
Disadvantage: if the child width is greater than the parent width, the excess content will be hidden.