元素的浮动
一、浮动
HTML元素的浮动是通过css来设定的，css中的float属性可以让元素左浮动或者右浮动，具体设置参数如下
float: left; /*左浮动*/
float: right; /*右浮动*/
float: none; /*不浮动*/我们通过一些例子来增进对浮动的理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1, .box2, .box3{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.box1{
background-color: orange;
}
.box2{
width: 200px;
background-color: pink;
}
.box3{
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>预览效果如下图
这是未设置浮动之前的效果，接下来我们对box1设置一下左浮动，代码如下
.box1{
float: left;
}效果如下
发现box1脱离了普通文档流，因box2还是属于普通文档流，所以直接顶上去，占据了box1元素原先的位置，接下来我们设置box1右浮动
.box1{
float: right;
}效果如下：
我们发现box1浮动到右侧，元素原先占有的位置不在保留，box2顶上去，占有了元素box1原来占有的位置
接下来我们把box1和box2都左浮动
.box1{
float: left;
}
.box2{
float: left;
}效果如下：
我们发现box1和box2从左往右依次排列，box2被box1的边界阻挡
接下来把box1、box2和box3都设置左浮动
.box1{
float: left;
}
.box2{
float: left;
}
.box3{
float: left;
}效果如下：box1，box2，box3依次从左往右排列
接下来我们在box3后面再增加一个内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1, .box2, .box3{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.box1{
background-color: orange;
float: left;
}
.box2{
float: left;
width: 200px;
background-color: pink;
}
.box3{
float: left;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
asdfasdfdsaf
</body>
</html>通过浏览器打开查看下效果
可以发现文字不是在新的一行，而是紧跟着html元素，这就导致布局无法按照我们预期的方式展现，这就是接下来我们要说的高度塌陷问题，那这个问题该如何解决呢，以及解决方式都有哪些，接下来我将罗列目前已知的几种处理方式，大家可以根据实际情况选择使用
二、高度塌陷的处理方式
在讲高度塌陷的处理方式时，我们先来举一个例子，这个例子是用ul 和li实现的菜单，源代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 300px;
}
ul li{
float: left;
font-size: 12px;
line-height: 12px;
padding: 0 6px;
border-right: 1px solid #666;
}
li.no_line{
border: none;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>注册</li>
<li>购物车</li>
<li>我的收藏</li>
<li>消息</li>
<li class="no_line">商城小程序</li>
</ul>
</body>
</html>效果如下
接下来给ul设定背景色和边框
ul{
background-color: #ddd;
border: 1px solid #000;
}效果如下：
我们会看到上图这奇怪的现象，其实上图就是因为没有给ul指定高度，而ul的子元素li全部浮动后导致的ul高度塌陷。
3.1 给父级元素设定高度
当然我们可以通过给ul设置高度，代码如下
ul{
height: 24px;
}效果如下
但是这种方式会影响布局，需要手动再次去调整子元素的布局，实际情况下用得很少
3.2 给父级元素设置overflow
可通过css的属性overflow来出发元素的bfc，从而让元素来清除浮动，比如我们在父元素ul上增加overflow属性
ul{
overflow: hidden;
}页面显示效果如下
可以看到这种效果比第一种的好，而且比第一种简单，但是overflow的本义并不是为了解决高度塌陷的，所以用在这里也是有点奇怪
3.3 给父级元素也设置浮动
给父元素ul设置css属性float
ul{
float: left;
}页面显示效果如下
可以看到效果和第二种方式差不多，但是在网页布局中，给父元素增加浮动，会导致其他方面的问题，也不推荐使用
3.4 增加html元素清除浮动
在ul内部的子元素最后增加一个html元素，给html元素增加css属性clear来清除浮动
<ul>
<li>首页</li>
<li>注册</li>
<li>购物车</li>
<li>我的收藏</li>
<li>消息</li>
<li class="no_line">商城小程序</li>
<div style="clear:both"></div>
</ul>效果图
可以看到效果一致，但是为了清除浮动，在html页面上增加一个元素，就显得多余，而且还会影响文档结构，也不推荐
3.5 通过伪元素清除浮动
通过给父元素设置伪元素
ul:after{
content: "";
display: block;
clear: both;
}效果也跟3.4的一致，这是目前大多数采用的方式
3.6 通过display:flow-root清除浮动
通过给父元素设置css属性display:flow-root来清除浮动
ul{
display: flow-root;
}效果图
个人推荐使用这种方式，但是这种方式是比较新的特性，旧的浏览器不支持，所以尽量还是使用3.5提供的方式。