Usage of float and clear in Div + CSS Sample Table

This article focuses on Div + CSS style sheet The usage of the float and clear attributes in and several small instances.

CSS float layout basics-CSS floating layout basis: Float-based layout uses the float attribute to locate elements side by side and create columns on the webpage. You can use this property to create an effect that is surrounded by an image, for example, a picture, but when you apply it to a <div> tag, floating becomes a powerful web page layout tool. The float attribute moves a webpage element to one side of a webpage (or other contained block. Any HTML displayed below the floating element moves up and around the page. The attributes of float are shown in the following table: left Text or image is moved to the left of the parent element. Right text or image is moved to the right of the parent element. None Default value. The text or image is displayed in the position where it appears in the document. In the CSS style sheet, clear: Both; can end the clear: both in the floating CSS before it appears; can end the floating before it appears. The clear attribute can be used to prevent other floating elements from appearing on the edge of an element. The following table lists the four properties of clear:   Left Float element right on the left of an element is not allowed Float element both on the right of an element is not allowed No floating element none is allowed on both sides of the element. Float and clear are allowed on both sides. Example: float and clear usage. <style>. FL {float: Left; width: 100px; Height: 25px; Background: # cccccc; margin-left: 5px; text-align; center; margin-top: 5px ;} /* float: Left when both divs have this, their arrangement will be side by side. When the second one has clear: both, they will wrap. */. Clrb {clear: both }. clrl {clear: Left ;}. clrr {clear: Right ;} </style> <Div class = "FL"> 1 </div> <Div class = "FL"> 2 </div> <Div class = "CLR"> </ div> <Div class = "FL"> 3 </div> <Div class = "FL"> 4 </div> You can also replace the clear attributes to see how it works. here I will focus on the effect of writing the clear attributes? Let's see Code And; <! -- When the clear value is both --> <Div class = "FL"> 1 </div> <Div class = "FL"> 2 </div> <Div class =" clrb "> </div> <Div class =" FL "> 3 </div> <Div class =" FL "> 4 </div> <! -- When the value of clear is left --> <Div class = "FL"> 1 </div> <Div class = "FL"> 2 </div> <Div class =" clrl "> </div> <Div class =" FL "> 3 </div> <Div class =" FL "> 4 </div> <! -- When the clear value is right --> <Div class = "FL"> 1 </div> <Div class = "FL"> 2 </div> <Div class =" clrr "> </div> <Div class =" FL "> 3 </div> <Div class =" FL "> 4 </div> effects: we can clearly see that this is not the result we want. the solution still needs to be used. Div + CSS Style Sheet The clear attribute in. It can be said that it is both clear and clear. <! -- When the clear value is both --> <div> <Div class = "FL"> 1 </div> <Div class = "FL"> 2 </div> <Div class = "clrb"> </div> <Div class = "FL"> 3 </div> <Div class = "FL"> 4 </div> <! -- When the clear value is left --> <Div class = "clrl"> <Div class = "FL"> 1 </div> <Div class = "FL"> 2 </div> <Div class = "clrl"> </div> <Div class = "FL"> 3 </div> <Div class = "FL"> 4 </Div> </div> <! -- When the clear value is right --> <Div class = "clrl"> <Div class = "FL"> 1 </div> <Div class = "FL"> 2 </div> <Div class = "clrr"> </div> <Div class = "FL"> 3 </div> <Div class = "FL"> 4 </Div> </div>:
For Div + CSS Style Sheet If you have any comments on the CSS attributes of float and clear, please leave a message and learn and correct them in time!
Refer to: div + CSS Article Column