css布局的三种机制
标准流：块级元素独占一行，从上至下顺序排列。行内元素按照顺序从左至右排列。
浮动：让盒子从标准流中浮起来。
定位：将盒子定在浏览器的某一位置。
浮动
概念：脱离标准流格式的控制，让块级元素可以在同一行显示。
作用：让多个盒子水平排成一列；使盒子左右对齐等。
特点：
加了浮动的盒子可以漂浮在其他标准流盒子上面
加了浮动的盒子不占位置，即原来的位置留给了标准流的盒子
浮动元素会生成一个块级框，与行内块模式十分相似
浮动的应用
浮动和标准流的父盒子搭配
一个完整的页面是由标准流、浮动、定位一起完成的
浮动元素与父盒子的关系
子盒子的浮动参照父盒子
不会与父盒子边框重叠，且不会超过父盒子的内边距
浮动元素与兄弟盒子的关系
若浮动盒子前一个兄弟盒子是浮动的，则当前盒子与前一盒子的顶部对齐，即同行排列。
若浮动盒子的前一个兄弟盒子是标准流，则当前盒子排列在兄弟盒子下面。
清除浮动
清除浮动的意义：为了减少浮动元素对后面元素排版所产生的影响。
什么情况下要清除浮动：
父级没高度
子盒子浮动了
影响到后面的布局
清除浮动的方法
额外标签法
.clear {
clear: both;
}
优点：书写方便且通俗易懂
缺点：需要添加许多无意义标签。
父级添加overflow属性方法
overflow: hidden; /*给父级添加 overflow 清除浮动*/
优点：代码简洁
缺点：当内容增多时会导致部分内容被隐藏，即内容显示不完整
使用after伪元素清除浮动（最常用方法）
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
} /*声明清除浮动的样式*/
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
优点：符合闭合浮动思想，结构语义化完整。
缺点：ie6-7不支持after，可使用zoom：1解决
双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: "";
display: table;
} /*声明清除浮动的样式*/
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点：代码更加简洁
缺点：ie6-7不支持after，可使用zoom：1解决
案例
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.one,
.two {
width: 300px;
height: 300px;
background-color: pink;
}
.one {
float: left;
}
.two {
background-color: black;
float: left;
}
.three {
float: left;
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
未经本人允许禁止转载
603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
