CSS-clear属性的作用

1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title></title>

  6     <style>

  7     .box1{

  8         width:100px;

  9         height:100px;

 10         background-color:yellow;

 11         float:left;

 12     }

 13     .box2{

 14         width:100px;

 15         height:100px;

 16         background-color:orange;

 17         /*clear:left;*/

 18         /*clear:right;*/

 19         clear:both;

 20     }

 21     .box3{

 22         width:200px;

 23         height:300px;

 24         background-color:#bfa;

 25         float:right;

 26     }

 27 /*

 28 如果我们不希望某个元素因为其他元素浮动的影响二改变位置，可以通过cle    ar属性来清除浮动元素对当前元素的所产生的影响

 29     clear:

 30         -作用：清除浮动元素对当前元素所产生的影响

 31         -可选值

 32             -left清除左侧元素对当前元素的影响

 33             -right清除右侧元素对当前元素的影响

 34             -both清除两侧影响中对该元素的位置影响最大的

 35         原理：

 36             设置清除浮动之后，浏览器会自动为元素添加一个上外边距，>    使其不受浮动元素的影响

 37  */

 38     </style>

 39 </head>

 40 <body>

 41     <div class="box1"></div>

 42     <div class="box2"></div>

 43     <div class="box3"></div>

 44 </body>

 45 </html>

~

~
巴特西

CSS-clear属性的作用

最新文章

热门文章
