CSS 浮动布局，解决清除浮动的问题
CSS 浮动布局，解决清除浮动的问题
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
7、浮动元素之间没有垂直margin的合并
理解练习
1、两端对齐浮动 float:left 和 float:right 示例一
首先将基本页面写出来瞧瞧先，如下：
可以从上图看到，里面的两个div是挨在一起的，那么如何设置两个div左右两边对齐呢？
此时就需要使用float:left和float:right分别设置一下了。
可以看到已经左右对齐了，但是间隔不是很好看，下面用margin稍微调整一下，如下：
1、两端对齐浮动 float:left 和 float:right 示例二
好了，写完了上面的示例，已经知道浮动布局中左右对齐的用法了。现在再来看看这第二个示例该怎么写。
首先先把基本页面写上，这次使用ul配合超链接a标签来编写，如下：
下面来改改li标签的样式，例如去掉小点，设置一下浮动左右对齐，如下：
好了，基本上都完成了，下面只要设置两个li的样式就可以完成了。
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
.menu{
width: 400px;
height: 41px;
border-bottom: 1px solid #ff8200;
/*border: 1px solid #ff8200;*/
padding: 0;
}
.menu li{
list-style: none;
line-height: 42px;
}
.menu li a{
text-decoration: none;
}
.menu .li1{
float: left;
width: 80px;
height: 42px;
background-color: #ff8200;
font-size: 16px;
font-family: "Microsoft YaHei";
}
.menu .li1 a{
margin-left: 5px;
}
.menu .li2{
float: right;
font-size: 14px;
}
</style>
</head>
<body>
<!-- div>ul.menu>(li.li$>a{新闻列表})*2 -->
<div>
<ul class="menu">
<li class="li1"><a href="">新闻列表</a></li>
<li class="li2"><a href="">更多>></a></li>
</ul>
</div>
</body>
</html>2、请使用浮动制作图中所示的菜单：
能够完成上面的HTML页面之后，继续来看看前面完成过的这样的常用菜单栏目，下搭设基本框架出来，如下：
好了，下一步就是设置相关样式，如下：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
list-style: none;
}
a{
text-decoration: none;
}
.outsidebox{
width: 694px;
height: 50px;
/*border: 1px solid gold;*/
}
.outsidebox ul{
margin-top: -1px;
margin-left: -35px;
}
ul li{
float: left;
width: 98px;
height: 51px;
/*background-color: gold;*/
text-align: center;
line-height: 51px;
border: 1px solid gold;
margin-left: -2px;
}
ul li a{
color: pink;
font-family: "Microsoft Yahei";
}
ul li:hover{
background-color: gold;
}
ul li:hover a{
color: #fff;
}
</style>
</head>
<body>
<!-- div.outsidebox>ul.mune>(li>a{公司简介})*7 -->
<div class="outsidebox">
<ul class="mune">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业动态</a></li>
<li><a href="#">招贤纳才</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>3、文字饶图效果:
这个效果到底该怎么实现呢？ 其实第一步就是要设置图片 float 起来，然后文字设置好边框看看即可，下面先搭好框架来看看，如下：
给图片设置float:left来看看效果：
成功啦，下面调整一下间距，好看一下，如下：
再来看看这个怎么实现
父级盒子不给高度，子集盒子浮动，父级盒子需要清除浮动
问题如下图：
可以从上图看出，父元素div并没有因为子元素的数量增多而增加，那么这种问题怎么处理呢？
这就是经典的问题清除浮动。
为什么叫做清楚浮动呢？因为子元素只要不设置float，父元素是可以自动扩展的。
注释了子元素的浮动的确可以解决，但是这样就无法使用浮动布局了。有没有可以使用浮动布局的同时，解决这个问题的方法呢？
答案肯定有的，看看下面。
清除浮动 ：子元素设置为浮动，父元素无法被撑开的这种情况
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}清除浮动的使用方法：
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">从上面看出有三个方法，我逐一测试一下看看。
使用父级元素div增加样式 overflow:hidden 来解决清除浮动的问题
很好，用overflow:hidden就可以解决了。再试试其他方法。
在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
这是一种不推荐过时的方法了，可以看看怎么处理。
这种方式为什么不推荐呢？因为需要在最后写多一个div标签，完全没用的。
那么还有什么更加好的方法呢？可以使用之前在解决margin-top塌陷时候的clearfix样式来试试。
使用clearfix样式来解决
只不过这次不是使用 before来解决了，而是使用after，再最后模拟刚才添加div的行为。
使用clearfix是公认最好的方式，那么这里可以把之前解决margin-top塌陷问题的clearfix部分样式进行合并，到最后就可以统一解决问题了。
合并clearfix样式
.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
content: "";
display:table;
clear:both;
}将上面两个样式合并一下，就写法如下：
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}但是其实这中方式，如果是在部分IE浏览器是不兼容的。
需要添加兼容样式，如下：
.clearfix{zoom:1;}最后合并如下：
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}