Home > Developer > Web Develop
How the Float Works
Floating elements leave the document stream and do not occupy space. The floating element stops at the border that contains its bounding rectangle or floating element.
Issues that may arise from floating elements
1. The height of the parent element cannot be stretched, affecting elements that are siblings of the parent element
2. Non-floating elements with the same sibling as the floating element will follow
3. The element before the element also needs to float unless the first element floats, otherwise it will affect the display structure of the page
What is the solution to clear float?
There are generally three ways to do this.
1. Clear floating with an empty label
Add an empty label after all the floating labels and define the CSS properties Clear:both
Contrast chart: Div is not being unfolded
Add an empty label, the disadvantage is to add a non-semantic tag
<styletype= "Text/css">Html,body,div{margin:0;padding:0;}. Box{Border:1px solid #333;}P{Border:1px dotted #333;}. Box img{float: Left;}. Box P{float: Left;}. CB{Clear:both;} </style></Head><Body><Divclass= "box"><imgsrc= "1.jpg"width= "50px"Height= "50px"> <P>One</P><!--add <div class= "CB" here ></div> -</Div></Body>
Of course, if the elements behind the floating element you do not need to float, you can add a clear:both to it, which is also good.
2. Using overflow
Adds a CSS property to the parent element tag that contains the floating element, Overflow:hidden or auto; Zoom:1, where zoom:1 is used for compatibility with IE6 to trigger Haslayout
3. Use the after pseudo-object to clear the float.
However, this method is only applicable to non-IE browser, but also note that when using it, remember to set the height:0 for the pseudo-object that needs to clear the floating elements; Otherwise, the object will be a few pixels higher than it actually is.
<style>
html,body,div{margin:0;padding:0;} . box{border:1px solid #333;} p{border:1px dotted #333;} . box Img{float:left;} . box P{float:left;} . Cb{clear:both;} . Clearfix{display:inline-block;/*zoom:1;*/}/* for IE; or use Zoom:1 to trigger the haslayout; */. Clearfix:after{content: "."; display:block; height:0; visibility:hidden;clear:both;} </style></Head><Body><Divclass= "box Clearfix"><imgsrc= "1.jpg"width= "50px"Height= "50px"> <P>One</P></Div></Body>
4. It floats the parent element of the floating element, but the whole is floating, so it's not recommended.
5. There is also a direct to the floating element to add attribute display:table;
FF Chrome and other support, IE6/IE7 test show does not support ~ so also have to trigger haslayout, plus zoom:1 or Display:inline-block bar
Talking about the floating problem of CSS
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
