Home > Developer > Web Develop
1. The CSS code is as follows:
<style type= "Text/css" >.divcss5{width:400px;Border:1px solid #F00;background:#FF0}. Divcss5-left,.divcss5-right{width:180px;Height:100px;Border:1px solid #00F;background:#FFF}. Divcss5-left{float: Left}. Divcss5-right{float: Right}</style>
2. Body Tag content:
<Body> <Divclass= "DIVCSS5"> <Divclass= "Divcss5-left">Left floating</Div> <Divclass= "Divcss5-right">Right floating</Div> </Div></Body>
3. Page view results:
Note: The original two black object box is in the red box, because the two black boxes using float float, so two black boxes produced a float , resulting in the red box can not be opened, so the float is generated.
Side effects from floating1. Background cannot be displayed
Because of the floating, if the parent set (CSS background background) CSS background color or CSS background image, and the parent can not be open, so that the CSS background can not be displayed.
2, the frame can not be open
As in, if the parent set CSS border properties (CSS border), because the child uses the float property, resulting in floating, the parent cannot be open, resulting in the border can not be open with the content.
3, margin padding setting value is not displayed correctly
The value of the CSS margin property is not expressed correctly because of a float that causes the parent child to set the CSS padding. In particular, the padding and margin on the bottom are not displayed correctly.
CSS fix floating, clear floating method1. The parent setting is appropriate for the CSS height
For the parent setting to fit the height style clear float, here to ". Divcss5" set a certain height, the general setting height needs to be able to determine the content height to set. Here we know that the content height is 100px+ the upper and lower border is 2px, so that the specific parent height is 102px.
The CSS code for the parent div is as follows:
{ width: 400px; Border: 1px solid #F00; background: #FF0; height: 102px}The other code is the same, and the results are as follows:
2, Clear:both Clear floating
After floating the element, use an empty element such as <div class= "clear" ></div>, and give the. Clear{clear:both in the CSS;} property to clean up the float. You can also use <br class= "clear"/> or
The CSS changes are as follows:
The HTML code is modified as follows:
The other code is the same, and the results are as follows:
3. Parent div definition Overflow:auto or overflow:auto
If this property of the parent element is set to auto or hidden, the parent element expands to include the float. This method has good semantics because he doesn't need extra elements. However, if you need to add a new div to use this method, in fact, the empty Div method is just like no semantics. Also remember that the overflow property is not defined to clear the float. Be careful not to overwrite the content or trigger unwanted scroll bars.
The CSS changes are as follows:
The HTML code is modified as follows:
The other code is the same, and the results are as follows:
4. Using CSS: after pseudo-elements
A smart CSS pseudo-selector (: After) was used to clear the float. Rather than setting overflow on the parent element, just add an extra class like "Clearfix" to it. This class uses the following CSS:
The CSS pseudo-element finally adds an invisible space "020" or a dot "." to the inner element of the container, and gives the clear property to clear the float. Note that in order to IE6 and IE7 browser, to Clearfix this class to add a zoom:1; trigger haslayout.
{ content: "020"; Display: block; height: 0; Clear: both; Visibility: hidden;}
{ /**/ zoom: 1;}This example CSS is modified as follows:
The HTML code is modified as follows:
The other code is the same, and the results are as follows:
Note: If the display is set to inline-block the result is not expected:
If content is relatively long:
What is the reason for this? Do not know which Master can explain ...
CSS Clear Float
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
