There are two methods that are most commonly used before:
Method 1,
When block-level clear is used, the class attribute of a block is declared
The code is as follows: |
Copy code |
. Clear {clear: both ;}
|
Method 2,
Use inline element cleanup, for example, after the master floating content is followed by an inline element.
The code is as follows: |
Copy code |
. Inlineclear {clear: both ;} <Span class = "inlineclear"> </span>
|
Method 3: Use a double div nest
The code is as follows: |
Copy code |
# Pubpage {display: block; clear: both ;} # Main {display: block; float: left ;} <Div id = "pubpage"> <Div id = "main"> Content </Div> </Div>
|
In this way, the internal main will support the floating
Method 4,
The code is as follows: |
Copy code |
/****** Clear float *******/ . Clearfix: after { Content :"."; Display: block; Height: 0; Clear: both; Visibility: hidden; } . Clearfix {display: inline-table ;} /* Hides from IE-mac */ * Html. clearfix {height: 1% ;} . Clearfix {display: block ;} /* End hide from IE-mac */
|
Add the class attribute of a container to be block, but this attribute must be the first, as shown in <div class = "clearfix votelist" id = "votelist">
The fourth method is compatible with a variety of browsers and can complete the layout without adding additional elements.
With the above methods, you will not have much trouble when using div + css layout.