本文详细介绍了CSS中的三种布局方式：标准流、浮动和定位。标准流是元素按照从上到下，从左到右的顺序排列。浮动常用于创建图文混排，元素会脱离标准流，向左或向右移动。定位允许元素相对于其正常位置或父元素进行定位，包括static、relative、absolute和fixed四种方式。此外，文章还探讨了清除浮动的方法，如使用额外标签、overflow属性和伪元素。最后，通过实例展示了两列布局的实现。
CSS三种布局介绍
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
标准流
标准流：或者普通流。
实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
定位
如果，说浮动， 关键在一个 “浮” 字上面， 那么我们的定位，关键在于一个 “位” 上。
浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置的过程。
浮动的分类
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）
浮动的特征
浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
浮动首先创建包含块的概念。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
示例：如果有多个浮动元素超出父盒子就会换行。
<style>
#f{
width: 200px;
background-color: rgb(0, 204, 231);
height: 100px;
}
#s{
width: 100px;
height: 100px;
background-color: rgb(78, 78, 78);
float: right;
overflow: hidden;
}
.b{
width: 200px;
height: 100px;
background-color: red;
float: left;
overflow: hidden;
}
</style>
</head>
<body>
<div id="f">
<div id="s"></div>
<div class="b"></div>
</div>
<p>sdf</p>
</body>
<style>
*{
padding: 0;
margin: 0;
}
h2 {
font-size:14px;
line-height:35px;
color:#4d4d4d;
padding-left:10px;
}
h3 {
font-size:14px;
font-weight:normal;
line-height:30px;
margin-top:3px;
color:#2e75bc;
}
li {
list-style:none;
line-height:20px;
color:#999;
}
#wrap {
width:700px;
overflow:hidden;
}
.imgbox {
float:left;
width:220px;
border:1px dotted #e3e3e3;
height:99px;
overflow:hidden;
}
.imgbox img {
margin:10px 15px 0 10px;
float:left;
padding:3px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<h2>摄影社区热门小镇</h2>
<div id="wrap">
<div class="imgbox">
<img src="./image/pic_01.jpg" alt="" class="img">
<h3>风景狙击手</h3>
<ul>
<li>
<p>成员：80</p>
<p>作品：43</p>
</li>
</ul>
</div>
<div class="imgbox">
<img src="./image/pic_01.jpg" alt="" class="img">
<h3>风景狙击手</h3>
<ul>
<li>
<p>成员：80</p>
<p>作品：43</p>
</li>
</ul>
</div>
<div class="imgbox">
<img src="./image/pic_01.jpg" alt="" class="img">
<h3>风景狙击手</h3>
<ul>
<li>
<p>成员：80</p>
<p>作品：43</p>
</li>
</ul>
</div>
<div class="imgbox">
<img src="./image/pic_01.jpg" alt="" class="img">
<h3>风景狙击手</h3>
<ul>
<li>
<p>成员：80</p>
<p>作品：43</p>
</li>
</ul>
</div>
<div class="imgbox">
<img src="./image/pic_01.jpg" alt="" class="img">
<h3>风景狙击手</h3>
<ul>
<li>
<p>成员：80</p>
<p>作品：43</p>
</li>
</ul>
</div>
<div class="imgbox">
<img src="./image/pic_01.jpg" alt="" class="img">
<h3>风景狙击手</h3>
<ul>
<li>
<p>成员：80</p>
<p>作品：43</p>
</li>
</ul>
</div>
</body>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid;
}
.a{
background-color: red;
height: 231px;
float: right;
padding-right: 100px;
margin-top: 100px;
}
.b{
background-color: green;
width: 1050px;
float: left
/* float: right; */
}
.c{
background-color: blue;
float: left
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
- 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
- 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
清除浮动
为什么要清除浮动
我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，但是，不能说浮动不好
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
<style>
.f{
width: 500px;
background-color: blue;
}
.s{
width: 250px;
background-color: green;
height: 100px;
float: left;
}
.c{
clear: both;
}
</style>
</head>
<body>
<div class="f">
<div class="s">
</div><div class="c"></div>
</div>
</body>
overflow
1、额外标签法
W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如< div style=”clear:both”>，或则其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加无意义的标签，结构化语义化较差
2、父级添加overflow属性方法
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
3、伪元素清除浮动
在父元素中使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：
<style>
.f{
width: 200px;
background-color: teal;
}
.s{
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.f:after{
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.f{
*zoom: 1;
}
</style>
</head>
<body>
<div class="f">
<div class="s"></div>
</div>
</body>
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等
注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。
在父元素中使用before和after双伪元素清除浮动
4、双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
可以通过触发BFC的方式，可以实现清除浮动效果。(Block formatting context，块级格式化上下文)
优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用zoom:1触发 hasLayout。
定位
定位分类
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位
示例：
<style>
*{
margin: 0;
padding: 0;
}
.p{
width: 520px;
height: 280px;
margin: 100px auto;
position: relative;
border: 10px solid red;
}
.le{
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
}
.r{
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
}
ul{
list-style: none;
}
.cir{
position: absolute;
height: 15px;
background-color: rgba(146, 156, 156, 0.5);
border-radius: 10px;
bottom: 0%;
left: 50%;
transform: translate(-50%,0);
bottom: 10px;
}
.cir li{
background-color: white;
width: 9px;
height: 9px;
border-radius: 50%;
float: left;
margin: 4px;
}
</style>
</head>
<body>
<div>
<div class="p">
<img src="./01.jpg" alt="">
<a href="#a"><img src="./left.png" alt="" class="le"></a>
<a href="#b"><img src="./right.png" alt="" class="r"></a>
<ul class="cir">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
示例：
<style>
.nav{
height: 45px;
/* border: 1px solid; */
background-color: #FCFCFC;
border-top: 1px solid rgb(255, 153, 0);
border-bottom: 1px solid #eee;
}
.nav a{
height: 45px;
line-height: 45px;
/* border: 1px solid; */
display: inline-block;
color: #444;
text-decoration: none;
font-size: 14px;
padding:0 15px;
}
a:hover{
background-color: #eee;
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<div class="nav">
<a href="">设为首页</a>
<a href="">手机新浪网</a>
<a href="">移动客户端 </a>
</div>
</body>
布局
两列布局
<style>
.f{
width: 500px;
margin: 0 auto;
}
.s1{
height: 500px;
float: left;
width: 150px;
background-color: skyblue;
}
.s2{
height: 500px;
float: right;
width: 300px;
background-color: teal;
}
</style>
</head>
<body>
<div class="f">
<div class="s1"></div>
<div class="s2"></div>
</div>
</body>
扫一扫
2002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
