CSS-14-浮动

Posted 2022-05-20 qinqin-me

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS-14-浮动相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             body
 8                 margin: 0;
 9             
10             /*浮动*/
11             /*浮动只有向左和向右浮动*/
12             /*浮动会让元素脱离文档流,后面不浮动的元素会占据原来的位置*/
13             /*浮动会让元素转换成行内块元素(让浮动的元素并列在一行)*/
14             /*当父级元素没有设置固定高度,子元素都浮动时,父级元素的高度就无法被撑开
15                    解决办法：
16                              给父级元素添加overflow:hidden*/
17             /*停止浮动:
18                   a.碰到父级元素的边界会停止
19                   b.碰到前面有浮动的元素也会停止
20                   c.碰到没有浮动的元素*/
21             /*清除浮动:
22                   a.clear:both(left,right);
23                   b.在父级元素添加属性overflow：hidden;
24                   c.使用成熟的清除浮动样式，clearfix
25                         .clearfix:after,.clearfix:beforecontent:‘‘;display:table;
26                         .clearfix:afterclear:both;
27                         .clearfixzoom:1;*/
28              
29             
30             .float
31                 width: 200px;
32                 height: 200px;
33                 background-color: yellowgreen;
34                 text-align: center;
35                 line-height: 200px;
36                 /*float: left;*/
37             
38             .float1
39                 width: 200px;
40                 height: 200px;
41                 background-color: yellow;
42                 text-align: center;
43                 line-height: 200px;
44                 float: right;
45             
46             .clearfloat
47                 zoom: 1;
48             
49         </style>
50     </head>
51     <body>
52         <div class="float">
53             box1
54         </div>
55         <div class="float1">
56             box2
57         </div>
58         <div class="clearfloat">
59             
60         </div>
61     </body>
62 </html>

以上是关于CSS-14-浮动的主要内容，如果未能解决你的问题，请参考以下文章