float

最新推荐文章于 2023-06-09 09:21:23 发布

weixin_33835690

最新推荐文章于 2023-06-09 09:21:23 发布

阅读量60

点赞数

原文链接：http://www.cnblogs.com/justyq/p/4966486.html

版权

在css中float是浮动的意思，可以让元素浮动到自己想要的地方。

属性值有：left，right，none，inherit（在IE8以下的任意版本不支持）

与float相关的属性clear：属性值：left（清楚左边），right（清楚右边），both（清楚左右两边），none（无），inherit（继承的浮动元素）

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .d{
 8             width: 400px;
 9             height: 20px;
10             border: 1px solid red;
11         }
12         .s1{
13             background-color: green;
14         }
15         .s2{
16             background-color: greenyellow;
17         }
18         .s3{
19             background-color: aquamarine;
20             float: right;
21         }
22     </style>
23 </head>
24 <body>
27 <div class="d">
28     <span class="s1" >test1</span>
29     <span class="s2">test2</span>
30     <div class="s3">sometimes naive</div>
31 </div>
32 </body>
33 </html>

以上代码中，我们可以把浮动理解为：隐性的把内联元素转换为块级元素，但是内部的特性就是有物理特性，但是他不占据一行，对外是内联元素的属性。相当于display：inline-block。

另外：

行内元素float后，对齐于旁边元素的顶部

行内元素flaot后,可以设置宽和高，以及垂直方向上的margin。

float：用在父级元素上，在没有设置宽高的情况下，回去自适应子元素的宽高

转载于:https://www.cnblogs.com/justyq/p/4966486.html

weixin_33835690

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float

在css中float是浮动的意思，可以让元素浮动到自己想要的地方。属性值有：left，right，none，inherit（在IE8以下的任意版本不支持）与float相关的属性clear：属性值：left（清楚左边），right（清楚右边），both（清楚左右两边），none（无），inherit（继承的浮动元素） 1 <!DOCTYPE html> 2 <h...
复制链接

扫一扫