本文详细介绍了网页布局的三种常见方式：标准流、浮动布局以及如何清除浮动。标准流是元素按照默认方式排列，浮动布局常用于实现元素一行显示，而清除浮动则是为了解决父级元素高度塌陷问题。文章通过实例展示了如何使用浮动创建多列布局，并提供了多种清除浮动的方法，包括额外标签法、父级添加overflow属性和使用CSS伪元素。
传统网页布局的方式有三种：
1.普通流（标准流）
2.浮动
3.定位
一、标准流（普通流/文档流）
标签按照规定好的默认方式排列
1.块级元素独占一行，从上到下排列，常用的会计元素如div、hr、p、h1~h2、ul、ol、dl、form、table
2.行内元素会按照顺序从左到右排序，碰到父元素边缘自动换行。常用的元素：span、a、i、em
二、浮动
1.使用浮动的原因：很多布局效果，标准流是没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变标签默认的排列方式。浮动最典型的应用：多个块级元素一行内排列显示，多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
2.什么是浮动
float属于用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含快或者另外一个浮动框的边缘。其语法如下
选择器{float:属性值;}
| 属性值 | 描述 |
| none | 元素不浮动(默认值) |
| left | 元素向左移动 |
| right | 元素向右移动 |
3.浮动的特性
3.1 浮动元素会脱离标准流
- 脱离标准流的控制，移动到指定位置
- 浮动的盒子不在保留原先的位置，其他盒子会占据他原先的位置，而出现两个盒子层叠的效果（浮动盒子悬浮在其他盒子表面）
3.2浮动的元素会一行内显示并且元素顶部对齐
- 如果多个盒子都设置的浮动，则他们会按照属性值一行内显示，并顶端对齐排列。
- 浮动元素互相贴靠在一起，没有缝隙，如果父级元素宽度装不下浮动盒子，多出的盒子会另起一行对齐。
3.3浮动的元素会具有行内快元素的特性
- 任何模式的元素添加浮动之后都具有行内块元素相似的特性
- 块级元素如果没有设置宽度，默认的宽度和父级一样宽，但是添加浮动后，他的大小根据内容来定。
4.浮动元素经常和标准流父级搭配使用
为了约束浮动元素的位置，先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
案例一
如类似这种几个排版相同的盒子排成一排，可用无序列表来做，采用父级标准流+float搭配应用。 代码如下：
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
li
{
list-style: none;
}
.box
{
width: 100%;
height: 300px;
background-color: #f3f5f0;
padding-left: 0px;
}
.box li
{
width: 311px;
height: 283px;
float: left;
margin: 2px;
background-color: #fdfffc;
text-align: center;
position: relative;
}
.box img
{
width: 311px;
height: 171px;
float: left;
margin: 1px;
text-align: center;
}
.p_dbt
{
font-size: 12px;
position: relative;
top: 30px;
}
.p_xbt
{
font-size: 12px;
position: relative;
top: 40px;
color: #d6d8d7;
}
/* 注意此处的权重要比上面的权重高，才能去除最后一个盒子的右外边距 */
.box .last
{
margin-left: 0px; /*去除最后一个盒子的右外边距，否则最后一个盒子会被挤到下一行。*/
}
</style>
</head>
<body>
<ul class="box">
<li>
<img src="bupic/1.png" />
<p class="p_dbt">
这是一张非常好看的图片这是一张</p>
<p class="p_xbt">
你看看</p>
</li>
<li>
<img src="bupic/2.png" />
<p class="p_dbt">
标题图片的</p>
<p class="p_xbt">
你看看</p>
</li>
<li>
<img src="bupic/3.png" />
<p class="p_dbt">
标题图片的</p>
<p class="p_xbt">
你看看</p>
</li>
<li>
<img src="bupic/4.png" />
<p class="p_dbt">
标题图片的</p>
<p class="p_xbt">
你看看</p>
</li>
<li>
<img src="bupic/1.png" />
<p class="p_dbt">
标题图片的</p>
<p class="p_xbt">
你看看</p>
</li>
<li>
<img src="bupic/2.png" />
<p class="p_dbt">
标题图片的</p>
<p class="p_xbt">
你看看</p>
</li>
</ul>
</body>
</html>
运行效果如下
案例二、将一个整体分为左右两部分，整体用一个div,在其中嵌套两个浮动的div,右边的div中放八个浮动无须列表或者div。代码如下所示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.box
{
width: 1226px;
height: 100%;
margin: 0 auto;
background-coloe: pink;
}
.left
{
float: left;
width: 234px;
height: 100%;
background-coloe: purple;
}
.right
{
float: right;
width: 992px;
height: 100%;
background-color: skyblue;
}
.right > div
{
float: left;
width: 30%;
height: 300px;
margin: 14px;
background-color: #fff;
text-align: center;
}
.right >div>a> img
{
width: 294px;
height: 171px;
margin: 1px;
text-align: center;
}
a{ text-decoration:none}
a:link{color:#000 }
a:visited{color:red}
.p_dbt
{
font-size: 12px;
position: relative;
top: 30px;
}
.p_xbt
{
font-size: 12px;
position: relative;
top: 40px;
color: #d6d8d7;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
左位置</div>
<div class="right">
<div >
<a href="#">
<img src="bupic/1.png" />
<p class="p_dbt">
非常美丽的图片</p>
<p class="p_xbt">
你看看</p></a>
</div>
<div >
<a href="#">
<img src="bupic/2.png" />
<p class="p_dbt">
非常美丽的图片</p>
<p class="p_xbt">
你看看</p></a>
</div>
<div >
<a href="#">
<img src="bupic/3.png" />
<p class="p_dbt">
非常美丽的图片</p>
<p class="p_xbt">
你看看</p></a>
</div>
<div >
<a href="#">
<img src="bupic/4.png" />
<p class="p_dbt">
非常美丽的图片</p>
<p class="p_xbt">
你看看</p></a>
</div>
<div >
<a href="#">
<img src="bupic/1.png" />
<p class="p_dbt">
非常美丽的图片</p>
<p class="p_xbt">
你看看</p></a>
</div>
<div >
<a href="#">
<img src="bupic/2.png" />
<p class="p_dbt">
非常美丽的图片</p>
<p class="p_xbt">
你看看</p></a>
</div>
</div>
</div>
</body>
</html>
运行效果如下：
三、清除浮动
1.为什么要清除浮动？
答：由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动有不占位置，最后父级盒子的高度为0时，就会影响下面标准流盒子。
2.清除浮动的本质
- 清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
3.清除浮动策略
闭合浮动。只让浮动在父盒子内部影响。不影响父盒子外面的其他盒子。
4.语法
选择器{clear:属性值;}
| 属性值 | 描述 |
| left | 不允许左侧有浮动元素 |
| right | 不允许右侧有浮动元素 |
| both | 同时清除两侧浮动元素 |
5.清除浮动的方法
5.1额外标签法
额外标签法又称为隔墙法，W3C推荐做法。
额外标签法会在浮动元素末尾加一个空标签。例如<div style="clear: both"></div>，或者其他标签（如<br/>等）
优点：通俗易懂，书写方便。
缺点：添加许多无意义标签，结构化差。
注意：要求这个新空标签必须是块级元素。
5.2父级添加overflow
可以给父级添加overflow属性，将其属性设置为hidden、auto或者scroll。
优点：代码简洁
缺点：无法显示溢出部分
5.3:after伪元素法
:after方式是额外标签法的升级版，也是给父元素添加。
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1; /* IE6、7专有 */
}优点：没有增加标签，结构简单
缺点：要照顾低版本浏览器
5.4双伪元素清除浮动
也是给父元素添加。
.clearfix:befor,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix:{
*zoom: 1; /* IE6、7专有 */
}优点：代码更加简洁
缺点：要照顾低版本浏览器
扫一扫
1605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
