本文介绍了CSS中的浮动布局原理，包括块级元素、行内元素的特点以及浮动元素如何影响标准流。通过示例代码展示了如何使用浮动实现两列布局，并解释了为何需要清除浮动及其方法，如额外标签法、overflow隐藏和伪元素。此外，讨论了清除浮动的目的是防止父元素高度塌陷，以保持页面布局的稳定性。
浮动-float
网页布局的本质-用css来摆放盒子。把盒子摆放到相应位置。css提供了三种传统布局方式
- 普通流（标准流）
- 浮动方式
- 定位方式
关于标准流
- 块级元素会独占一行，从上到下顺序排列
- 常用元素： div hr p h1-h6 ul ol form table
- 块级元素中的行内元素会从左到右顺序排列，碰到父元素边缘则自动换行
- 常用元素 span a i em等
浮动-float
浮动特性
- 浮动的元素会脱离标准流（脱标，位置会发生改变，飘在标准流的最上边）
- 浮动的盒子不再保留原先的位置
- 如果多个盒子都设置了浮动，他们会按照属性值一行内显示并且顶端对齐排列。
- 浮动元素会具有行内块元素属性
- 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性；
- 如果块级元素没有设置宽度，默认宽度和父级宽度一样宽，但是添加浮动之后，它的大小根据内容来确定。
- 浮动的盒子中间是没有缝隙，是紧挨着一起的
- 行内元素同理
为了约束浮动元素的位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
.big{
height: 600px;
width: 1200px;
background-color: pink;
margin: 100px auto;
}
.left{
width: 300px;
float: left;
height: 600px;
background-color: gray;
}
.right{
width: 900px;
float: right;
height: 600px;
background-color: yellow;
}
.right>div{
float: left;
width: 211px;
height: 293px;
background-color: black;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="big">
<div class="left">123</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html>注意注意注意：
浮动的盒子只会影响浮动盒子后面的标准流，而不会影响前面的标准流。
前面的标准流独占一行；
后边的标准流在浮动的下边；
一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个盒子，如果一个盒子浮动了，那么其他的兄弟盒子也要浮动。
清除浮动
为什么要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子的浮动又不占有位置，最后父盒子高度为0时，就会影响下边的标准流黑子，所以需要清除浮动。
子盒子浮动，就脱标，父盒子没有高度就是0，不会撑开盒子。
语法：
选择器{
clear:属性值
}| 属性值 | 描述 |
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动的元素（清除右侧浮动的元素） |
| both | 同时清除左右两侧浮动的影响 |
我们的实际工作中，几乎只用clear:both;
清除浮动的策略是：闭合浮动；
清除浮动的方式
- 额外标签法，是w3c推荐的方法；
- 父级元素添加overflow:hidden；
- 父级元素添加after伪元素；
- 父级添加双伪元素；
额外标签：
隔离法。会在浮动元素的末尾添加一个空的标签。例如：<div style="clear:both"></div>或者是其他标签 <br/>
清除浮动的本质：清除浮动元素脱离标准流造成的影响；
清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
父级元素添加overflow
可以给父元素添加overflow属性，将其属性值设置为hidden、auto或者是scroll
优点：代码简洁；
缺点：无法显示溢出的部分；
:after伪元素
:after方式是额外标签法的升级版，也是给父元素添加
.clear:after{
content:''; /*该属性为必填项*/
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ /*IE 6、7专有*/
*zoom:1;
}
<div class="clearfix>
双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:'';
distplay:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}为什么清除浮动：
- 父级没高度
- 子盒子浮动了；
- 影响下边的布局了，我们就应该清除浮动了；
PS切图
图层切图；切片切图；ps插件切图（cutterman-正版才能安装，绿色版不能安装）
css书写规范
建议遵循以下顺序：
1、布局定位属性：display/position/float/clear/visibility/overflow
2、自身属性：width/height/margin/padding/border/background
3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4、其他属性(css3)：content/cursor/bord-radius/box-shadow/text-shadow/ background:linear-gradient...
扫一扫
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
