Css float属性的一些特点
css布局中float布局是常用的布局方式，用于实现横向多列布局。这个时候我们就需要对float属性的特点进行整理，float属性可以说是学习csds布局第一个难点，如果不花时间去整理一下他的特点，布局的时候会挺坑的。
我把float属性的特点整理为以下几类，1，对元素本身的影响 2，对父容器的印象 3，对相邻元素的影响
1.float属性对元素本身的影响：
当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
例：给元素设置浮动属性，并指定高度，元素的宽度会随着内容的宽度的变化而变化。
例 布局1：
<html>
<head>
<title>float属性的特点测试</title>
<style type="text/css">
.box1{
float: left;
height: 30px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是内容</div>
</div>
</body>
效果如下：
1.png
可以看到当我增加元素的内容的时候，元素的宽度增加了：
例：我设置元素的内置为“我是元素增加内容”
2.png
说明：这里特别指定是布局的元素宽度值会随着内容的变化而变化，而没有说高度值。是因为块级元素的宽度默认是占满一行的，只要设置float属性后，才会随内容的变化而变化，而高度在没有指明的情况下，本身就是随内容的变化而变化的。
2.float属性对父元素的影响：
当一个元素的设置为浮动后，它的布局范围会超过父元素布局范围。 并且不能撑开父元素的盒子范围。如果要把他限制在父元素的盒子范围需要清除浮动。
例：布局2
<head>
<title>float属性的特点测试</title>
<style type="text/css">
.wrap{
border: 4px solid gray;
}
.box1{
float: left;
height: 30px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是内容</div>
</div>
</body>
</html>
例：下面这个图的红框的内容是box1元素的父元素，可以看到它的内容并没有被box1元素撑开，它是浮动到了元素的外围。
3.png
如果我们要把父元素撑开，可以为它的父元素设置清除浮动属性。
4.png
.wrap{
border: 4px solid gray;
overflow: hidden;
}
3.float属性对其他元素的影响：
当元素设置浮动属性后，会对相邻的元素产生影响。相邻元素特指紧邻后面的元素。
例 布局3：
<head>
<title>float属性的特点测试</title>
<style type="text/css">
.wrap{
/*border: 4px solid gray;*/
}
.box1{
float: left;
height: 36px;
background: blue;
}
.box2{
height: 36px;
background: red;
}
.box3{
height: 36px;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
</div>
</body>
</html>
效果如下图：
5.png
可以看到我们给box1设置了左浮动，然后box2受到了浮动影响，本来块级元素是默认一占一行的。但现在box2和box1是一行显示，说明box2受到了浮动的影响。但是box3没有受到任何影响。因为浮动只针对紧邻其后的元素有影响。
清除浮动对紧邻元素的影响的常用方法有两种：
1.clear属性：
clear:both;
clear:left;
clear:right;
以布局3为例，我们要清楚box2受到的浮动影响，就可以通过给其设置clear属性。both表示受到左右浮动的印象，left表示受到左浮动的影响，right表示受到右浮动的影响。
.box2{
height: 36px;
background: red;
clear: left;
}
效果如下： 给box2设置clear浮动属性后，可以看到box2不会受到浮动的影响，恢复了块级元素的一占一行的默认状态。
6.png
2.同时设置windth:100%(或固定宽度)+overflow:hidden;
同样以布局3为例：给box2元素设置宽度和overflow:hidden：
.box2{
height: 36px;
background: red;
width: 100%;
overflow: hidden;
}
效果如下：可以看到和清楚浮动的效果相同。
7.png
这里需要注意的是如果我在这里给 box2设置固定宽度，而box2宽度没有超过（父容器宽度-box1的宽度），这个时候box1和box2还是会排成一行。 这种技术常用于实现横向多列布局。
.box2{
height: 36px;
background: red;
width: 100px;
overflow: hidden;
}
效果如下：
8.png
补充特点4：
块级元素进行左浮动的时候，如果前面是有左浮动的块级元素就排在之前左浮动的块级元素的后面，如果前面没有左浮动的块级元素，只有行内元素，那么浮动的块级元素会排该盒子容器的最左边。
右浮动同样如此。
例布局4：
<html>
<head>
<title>float属性的特点测试</title>
<style type="text/css">
.wrap{
/*border: 4px solid gray;*/
}
.box1{
float: left;
height: 36px;
background: blue;
}
.box2{
float: left;
height: 36px;
background: red;
}
.box3{
height: 36px;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
</div>
</body>
</html>
这里的box2进行左浮动，因为他之前的box1已经设置了左浮动，所以box2排在box1之后。
9.png
如果，box2之前没有左浮动的块级元素，只有行内元素，会是什么效果呢？
10.png
可以看到，box2排在了大盒子的最左边。
网友评论