一、简介
float浮动，起源于图片与文字的环绕形式。类似于Word里面的文字居左，居右或者文字浮于图片之上。有三个属性值：left左浮动、right右浮动和none不浮动。利用浮动布局可以解决元素与元素之间的无缝衔接，不用考虑块级标签不能同行排列的特性，更不用考虑行级标签代码换行被解析的困扰，即不用在给其父级设置font-size=0这样的操作。大大的减少了我们的代码体积。
1.1、float带来的困扰
如果元素设置float属性，则这个元素会脱离文档流，即在HTML中不占用任何位置，也就是说浮动元素不会撑开其父级的高度，并且它原有的位置会被下一个元素所占用，但是由于其是浮动元素，所以它的层级会比普通元素高。导致元素会覆盖掉下面的元素。而且设置成float元素之后不会继承其父级的宽高，即使该元素是块级元素也不会。
1.2、解决办法
1.2.1、上面说过，float元素会脱离文档流，不占用位置，所以如果其父级的高是auto的话，这会导致父级的高为0，所以第一种解决办法给父级一个高度。
1.2.2、如果元素为float，则可以在其后面写上一个clear：left | right | both；这一样式，（从左至右）表示，清除上一同级元素的左浮动 | 右浮动 | 两边浮动。但是这一方法不推荐使用。在实际项目开发过程中，使用float的次数很多，如果每一次都需要在float元素之后再写一个清除浮动的话，会造成代码冗余，导致体积较大。
1.2.3、借助伪类。element：：after{ content：”“； display： block；}，元素后面加上伪类：：after，表示在该元素之后所编写的样式，不占用HTML里面任意一个空间，而且如果将该方法写在外部样式表里面也可以起到重复利用的效果，这样即能达到目的，又能减少代码的堆积
二、巧用float
2.1、eg1:利用HTML、CSS编写一段代码，实现一段固定，一段自适应。
要求：一端固定的元素宽为240px,margin=10px；另一端宽度自适应与浏览器的宽度
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>一段固定，一段自适应</title>
<style>
.one {
width: 240px;
height: 600px;
background: red;
float:left;
}
.two {
height: 500px;
background: blue;
margin-left: 250px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
分析：第一个盒子左浮动，导致其脱离文档流，不占用body里面任何空间，所以第二个盒子会继承其父级所有的宽度，但这样的效果不是我们想要的，所以给第二个盒子加上一个margin-left：250px（one盒子的宽240px + margin值10px）；
eg2:利用HTML、CSS实现两端固定，中间自适应的效果
要求：两端固定的宽度为240px,margin：10px；中间的盒子自适应浏览器的宽度
代码如下：
.one {
width: 240px;
height: 600px;
background: red;
float:left;
}
.two {
width:240px;
height: 600px;
background: blue;
float:right;
}
.middle {
height:500px;
background: black;
margin: 0 250px;
}
<body>
<div class="one"></div>
<div class="two"></div>
<div class="middle"></div>
</body>
分析：原理跟例1很像，需要注意的就是body里面的<div class="middle"></div>的书写顺序，HTML代码的执行顺序是自上而下，如果将Middle写在two之前，则Middle会将整个HTML填满，导致two换行右浮动，所以要将Middle写在two之后。
一段固定，一段自适应
网友评论