Css General notes 02 -- float, clear (three examples), css02
Float and clearance are usually used in css, and they are also a required knowledge point. The concept is not much to mention. Here are several examples to illustrate its usage: 1. text surround effect 2. multiple divs are displayed side by side. 3. clear floating (displayed by default)
I. Text surround effect:
The html code is as follows:
1 <body> 2 3 <style type = "text/css"> 4 # big img {float: left; padding: 10px; border: 1px solid red ;} 5 # big span {font-size: 24px; font-weight: bold; margin: 0 auto ;} 6 </style> 7 <div id = "big"> 8 <span> ad floating effect: </span> 9 <p> text text text text text text text </p> 10 </div> 11 12 </body>
Explanation: If the img label is directly moved to the left, the effect of text surrounding the image will appear, while the padding: 10px; function is to set the distance between the image and text, the running effect is as follows (remember to modify the image path yourself ):
2. Multiple div display side by side
The html code is as follows:
1 <body> 2 3 <style type="text/css"> 4 #big div {width: 100px;height: 100px;} 5 .div1 {background: red;} 6 .div2 {background: yellow;} 7 .div3 {background: green;} 8 </style> 9 <div id="big">10 <div class="div1">div1</div>11 <div class="div2">div2</div>12 <div class="div3">div3</div>13 </div>14 15 </body>
The above code shows the effect as follows:
The figure shows that the three divs are not displayed side by side, but are displayed vertically. This is the default display method. To display them side by side, you only need to add one sentence in the above Code,
# Big div {width: 100px; height: 100px; float: left;} then the result is as follows:
3. Clear floating
The following html code is provided:
1 <body> 2 3 <style type = "text/css"> 4 # big div {width: 100px; height: 100px;} 5. div1 {background: red; float: left;} // note that the first div here is left floating; 6. div2 {background: yellow;} 7. div3 {background: green ;} 8 </style> 9 <div id = "big"> 10 <div class = "div1"> div1 </div> 11 <div class = "div2"> div2 </ div> 12 <div class = "div3"> div3 </div> 13 </div> 14 15 </body>
The second example shows that if float: left is set for div2 and div3, the three divs are displayed side by side. Note that in the above Code, the first div is left floating, but the last two are not set to floating. How is the running effect? For example:
The figure shows that div2 is missing. Why? Because div1 is set to left floating, div2 is displayed from the first display by default, so div1 overwrites div2, and div3 continues to be displayed from div2. Therefore, this result is returned, how can I restore the default display? To clear the floating point, modify the code. div2 {background: yellow; clear: left;} And then OK. The effect is as follows:
Div2 has appeared again. This is the function of clearing floating. The clear attribute has three values: left, right, and both. As the name suggests, you will know what it means. I will not talk about it much.
Here are the three examples. I hope they will help you. If you have any questions, please discuss them.
<Body>
<Div id = "layout1">
<P> the id is layout1. </p>
<Div id = "layout3">
<P> the id is layout2. </p>
</Div>
<Div id = "layout3">
<P> the id is layout3. </p>
</Div>
</Body>
Change
<Body>
<Div id = "layout1">
<P> the id is layout1. </p>
</Div>
<Div id = "layout2">
<P> the id is layout2. </p>
</Div>
<Div id = "layout3">
<P> the id is layout3. </p>
</Div>
</Body>
Three floating boxes in CSS are arranged in three columns. When the browser is scaled down, the last one is pushed down. How can this problem be solved?
This is a mathematical problem. The width is reduced proportionally, but the border is always 1px. After a certain proportion is reached, the width of the inside div plus the Border width (6) will exceed the width of the external div, the right div will be squeezed down.
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
