css general small notes 02?? Float, clear (three examples)_html/css

css general small notes 02?? Float, clear (three examples)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:02:05

Original

1110 people have browsed it

Floating and clearing are usually used in CSS, which is also a knowledge point that must be mastered. I won’t say much about conceptual things. Here are a few examples to illustrate its usage: 1. Text Surrounding effect 2. Display multiple divs side by side 3. Clear floating (default display)

-. Text wrapping 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>广告浮动效果:</span> 9          <p><img src="..\Desktop\p6.jpg" width="200" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>10      </div>11 12   </body>

Copy after login

Explanation: Float the img tag directly to the left, and the effect of text surrounding the image will appear. The function of padding: 10px; is to set the difference between the image and text. distance, the running effect is as follows (remember to modify the image path yourself):

2. Display multiple divs 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>

Copy after login

The above code displays as follows:

It can be seen from the picture that the three divs are not displayed side by side, but displayed vertically. This is the default display method. And if you want to display them side by side, you only need to add a sentence to the above code,

#big div {width: 100px; height: 100px; float: left;} and then the display effect is as follows:

3. Clear floating

There is the following html code:

 1  <body> 2     3      <style type="text/css"> 4         #big div {width: 100px;height: 100px;} 5         .div1 {background: red;float: left;}//注意这里的第一个div是左浮动； 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>

Copy after login

From As can be seen from the second example, if both div2 and div3 are set to float: left; the three divs will be displayed side by side. Pay attention to the above code. The first div is left floating, but the next two divs are not floated. What is the running effect? As shown in the picture below:

As you can see from the picture, div2 is missing. Why is this? Because div1 is set to float left, div2 will display from the first position by default, so div1 covers div2, and div3 continues to display from div2, so this results in such a result. So how to restore the default display? This requires clearing the floats and modifying the code .div2 {background: yellow;clear:left;} and it will be ok. The effect is as follows:

div2 appears again. This is the function of clearing floats. The clear attribute has three values: left, right, and both. As the name suggests, you already know what it means. I don’t know much about it. Said.

That’s it for the three examples. I hope it will be helpful to everyone. Any questions are welcome to discuss.