Home > Developer > Web Develop
Using the Float property allows the element to float to the left and right edges of the containing box so that the text surrounds it, creating a containing box with a paragraph inside it and a small div that is surrounded:
<HTML> <Head> <title><title><styletype= "Text/css">Div{Border:1px solid Red;width:200px;Height:200px; }. Div1{Background-color:Yellow;float: Right;width:100px;Height:100px; }</style></Head><Body><Div> <Divclass= "Div1"> <P>Using the Float property allows the element to float to the left and right edges of the containing box so that the text surrounds it, creating a box with a paragraph inside it and a small div:</P> </Div></Div
The above floating element is detached from the document stream while affecting other elements in the layout, allowing the elements around him to be re-laid.
To make the area of one side of a floating element clear, the subsequent element is displayed from the normal position of the element, and you can use the clear property to not
To have an element appear behind a floating element:
<HTML> <Head> <title><title><styletype= "Text/css">Div{Border:1px solid Red;width:200px;Height:400px; }. Div1{Background-color:Yellow;float: Right;width:100px;Height:100px; }H2{Clear: Left; }</style></Head><Body><Div> <Divclass= "Div1"> <P>Using the Float property allows the element to float to the left and right edges of the containing box so that the text surrounds it, creating a box with a paragraph inside it and a small div:</P> <H2>You can clear the floating element with the clear property here</H1> </Div></Div</body></HTML>
Effects of floating and clearing floats for elements in 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
