CSS-浮动及清除浮动
程序员文章站
2024-01-28 16:06:46
...
一、传统网页布局的三种方式（简单说就是盒子如何进行排序顺序）：
- 普通流（标准流）
- 浮动
- 定位
注意：实际开发中，一个页面基本都包含了这三种布局方式（移动端会有新的布局方式）
1.标准流
2.浮动
- 为什么要浮动？
- 什么是浮动？
- 浮动特性
加了浮动之后的元素，会具有很多特性，需要我们掌握的。
- .浮动元素会脱离标准流（脱标）
- .浮动的元素会一行内显示并且元素顶部对齐
- .浮动的元素会具有行内块元素的特性
注意：
如果行内元素有了浮动，则不需要转换块级元素\行内元素就可以直接给高度和宽度
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局的第一准则。
浮动布局注意点
二：清除浮动
为什么要清除浮动？
清除浮动的本质
清除浮动
、
清除浮动的方法
1...清除浮动-----额外标签法
2...父级添加overflow
3...清除浮动——：after伪元素法
4...清除浮动——双伪元素清除浮动
总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
border: 2px solid blue;
margin: 0 auto;
/*overflow: hidden; 父级添加overflow*/
}
.one {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.three {
width: 200px;
height: 100px;
background-color: red;
float: left;
}
.banner {
height: 400px;
background-color: gray;
}
/*额外标签法*/
/*.clear {
clear: both;
}*/
/*清除浮动——:after伪元素法;
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { IE6、7专有
*zoom: 1;
}*/
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="box clearfix"> <!-- 清除浮动----:双伪元素清除浮动; -->
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<!-- <div class="clear"></div> 额外标签法 -->
</div>
<div class="banner"></div>
</body>
</html>
下一篇： CSS设置滚动条样式（兼容IE）