- 1）块级元素独占一行显示-->标准流的显示方式
<style type="text/css">
.one{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.two{
width: 100px;
height: 100px;
background-color: pink;
display: inline-block;
float: right; 浮动
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
结果是：粉色的盒子在右边
-2）浮动的特点
1，设置了浮动的元素不在原来的位置，脱离了标准流。
2，可以让块级元素在一行显示，只要让它们的浮动都向左即可。浮动是顶部对齐。
3，浮动可以将行内元素转换为行内块元素。推荐还是使用display方法
3）浮动的作用
-->解决文字环绕问题
-->制作导航栏
-->网页布局4）清除浮动
1，不是删除浮动
2，消除浮动的影响
-->当子元素设置了浮动，父元素又没有设置高度的时候，页面造成混乱，这种情况下要使用清除浮动
clear：left |right |both
第一种方式：
<style type="text/css">
/* css初始化 */
*{
margin: 0;
padding: 0;
}
.content{
width: 500px;
/* height: 300px; */
background-color: #1351EF;
}
.left{
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
/* 清除浮动的盒子 */
.clearfix{
clear: both;
}
.footer{
width: 500px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<!-- 主体盒子 -->
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div> 清除浮动
</div>
<div class="footer"></div>
</body>
第二种方式：当父盒子中没有定位的元素是才可以使用这种方式
给复合子设置**overflow:** hidden;
第三种方式：使用伪元素清除浮动（最优的方式）
<style type="text/css">
/* css初始化 */
*{
margin: 0;
padding: 0;
}
.content{
width: 500px;
background-color: #1351EF;
}
.left{
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.footer{
width: 500px;
height: 50px;
background-color: black;
}
/* 清除浮动 */
.clearfix:after{
content: "";
display: block;
clear: both;
line-height: 0;
height: 0px;
visibility: hidden;
}
.clearfix{
zoom: 1; /* 为了兼容ie浏览器 */
}
</style>
</head>
<body>
<!-- 加入clearfix -->
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
