CSS学习笔记五(浮动流)
文章目录
浮动流
浮动
网页的布局方式
- 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
- 标准流(文档流/普通流)排版方式
- 其实浏览器默认的排版方式就是标准流的排版方式
- 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
- 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
- 垂直排版, 如果元素是块级元素, 那么就会垂直排版
- 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
- 浮动流排版方式
- 浮动流是一种"半脱离标准流"的排版方式
- 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
- 注意点:
- 浮动流中没有居中对齐, 也就是没有center这个取值
- 在浮动流中是不可以使用margin: 0 auto;
- 特点:
- 在浮动流中是不区分块级元素/行内元素/行内块级元素的
- 无论是块级元素/行内元素/行内块级元素都可以水平排版
- 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
- 综上所述, 浮动流中的元素和标准流中的行内块级元素很像
- 定位流排版方式
浮动元素的脱标
- 什么是浮动元素的脱标?
- 脱标: 脱离标准流
- 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
- 浮动元素脱标之后会有什么影响?
- 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
浮动元素排序规则
- 浮动元素排序规则
- 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
</style>
- 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
float: right;
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: right;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
- 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: left;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
浮动元素贴靠现象
-
什么是浮动元素贴靠现象?
-
如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
-
如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
-
- 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
浮动元素字围现象
- 什么是浮动元素字围现象?
- 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
div{
float: left;
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid #000;
}
p{
width: 500px;
height: 500px;
background-color: yellow;
}
- 应用场景
- 图文混排
清除浮动
盒子高度问题
- 在标准流中内容的高度可以撑起盒子的高度
<style>
div{
background-color: red;
}
p{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>
- 在浮动流中浮动元素内容的高不可以撑起盒子的高
<style>
div{
background-color: red;
}
p{
float: left;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>
清除浮动方式一
- 给前面的父盒子添加高度
- 示例代码:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*这里*/
height: 50px;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>极客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加高度前:
-
添加高度后
-
注意点:
- 在企业开发中能不写高度就不写高度, 所以这种方式
不常用
- 在企业开发中能不写高度就不写高度, 所以这种方式
清除浮动方式二(clear:both;)
- 利用**clear:both;**属性清除前面浮动元素对我的影响
- 示例代码:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*这里*/
clear: both;
/*margin无效*/
margin-top: 30px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>极客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加clear: both;前:
-
添加clear: both;后
-
注意点:
- 使用clear:both之后margin属性会失效, 所以
不常用
- 使用clear:both之后margin属性会失效, 所以
清除浮动方式三
- 在两个有浮动子元素的盒子之间添加一个额外的块级元素
- 示例代码:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*这里*/
.wall{
clear: both;
}
.h20{
/*利用额外块级元素实现margin*/
height: 20px;
background-color: deepskyblue;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<!--这里-->
<div class="wall h20"></div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>极客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加额外块级元素前
-
添加额外块级元素后
-
注意点
- 在外墙法中可以通过设置额外标签的高度来实现margin效果
- 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以
不常用
清除浮动方式四
- 在前面一个盒子的最后添加一个额外的块级元素
- 示例代码
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*这里*/
.wall{
clear: both;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
<!--这里-->
<div class="wall"></div>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>极客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加额外块级元素前
-
添加额外块级元素后
-
注意点:
- 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
- 和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
清除浮动方式五
- 什么是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子边框外的内容
- 示例代码
.test{
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: red;
overflow: hidden;
}
<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
-
添加overflow:hidden前
-
添加overflow:hidden后
- 如何利用overflow:hidden;清除浮动
- 给前面一个盒子添加overflow:hidden属性
- 示例代码
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*这里*/
overflow: hidden;
*zoom:1;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>极客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加overflow:hidden;前
-
添加overflow:hidden;后
-
注意点:
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
- 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
- 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
-
*zoom:1;和_zoom:1的区别
- 这个是hack写法，用来识别不同版本的IE浏览器
- _后面的属性只有IE6能识别
- *后面的属性 IE6 IE7能识别
清除浮动方式六
- 给前面的盒子添加伪元素来清除浮动
- 示例代码
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
li{
float: left;
}
/*这里*/
.clearfix:after {
/*生成内容作为最后一个元素*/
content: "";
/*使生成的元素以块级元素显示,占满剩余空间*/
display: block;
/*避免生成内容破坏原有布局的高度*/
height: 0;
/*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
visibility: hidden;
/*重点是这一句*/
clear: both;
}
.clearfix {
/*用于兼容IE, 触发IE hasLayout*/
*zoom:1;
}
</style>
<div class="box1 clearfix">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>极客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加伪元素前
-
添加伪元素后
-
注意点:
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西
清除浮动方式七
- 给前面的盒子添加双伪元素来清除浮动
- 示例代码
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
li{
float: left;
}
/*这里*/
.cf:before,.cf:after {
content:"";
display:table;
/*重点是这一句*/
clear:both;
}
.cf {
zoom:1;
}
</style>
<div class="box1 clearfix">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>极客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加双伪元素前
-
添加双伪元素后
-
注意点:
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
- 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
- 不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。
感谢极客江南，B站有相关视频，参考链接：https://www.jianshu.com/p/b5123d2fb602
扫一扫
871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
