「Web前端开发」-16-CSS浮动

节课介绍CSS的浮动。

动是css里面布局用的最多的属性。

一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。

也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。

浮动的性质：脱标、贴边、字围、收缩。

浮动的元素脱标

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
    height: 400px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

两个元素并排了, 并且两个元素都能够设置宽度、高度了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}
</style>
</head>
<body>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。

也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。

浮动的元素互相贴靠

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
    font-size: 60px;
}
.box1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 120px;
    height: 220px;
    background-color: gold;
}
.box3{
    float: left;
    width: 340px;
    height: 300px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

浮动的元素有"字围"效果

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
width: 344px;
height: 516px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

div挡住了p, 但是p中的文字不会被挡住, 形成"字围"效果。如果将p标记换成div, 则不会有"字围"效果。

详细案例见：CSS|实例|图文混排

收缩：一个浮动的元素, 如果没有设置width, 那么将自动收缩为文字的宽度(这点非常像行内元素)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div>我是文字</div>
</body>
</html>

浮动的清除

实验：现在有两个div, div身上没有任何属性。每个div中都有li, 这些li都是浮动的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

我们本以为这些li, 会分为两排, 但是, 第二组中的第1个li, 去贴靠第一组中的最后一个li了。

第二个div中的li, 去贴第一个div中最后一个li的边了。

原因就是因为div没有高度, 不能给自己浮动的孩子们, 一个容器。

清除浮动方法1：给浮动的元素的祖先元素加高度。缺陷: 只限于父元素高度确定的情况下。

如果一个元素要浮动, 那么它的祖先元素一定要有高度。高度的盒子, 才能关住浮动。

解决方法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
height: 50px; /* 为父元素设置高度 */
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

清除浮动方法2：clear:both;

网页制作中, 高度height很少出现。为什么? 因为能被内容撑高! 那也就是说, 刚才我们讲解的方法1, 工作中用的很少。

脑弄大开：能不能不写height, 也把浮动清除了呢? 也让浮动之间, 互不影响呢?

clear:both;

clear就是清除, both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

这种方法有一个非常大的、致命的问题, margin失效了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

清除浮动方法3：隔墙法

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

墙! <div class="cl h18"></div>

这个墙, 隔开了两部分浮动, 两部分浮动, 互不影响。

近些年, 有演化出了"内墙法"：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

内墙法本质-给没有高的父亲撑出高

因为一个父元素不可能被浮动的子元素撑出高度, 解决的方法：内墙法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果没有清除浮动 , 则父元素的盒子没有高度, <div>盒子只是一条线*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮动方法4：overflow:hidden;

overflow就是"溢出"的意思, hidden就是"隐藏"的意思。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端开发工程师又发现了, 能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是, 只要给父亲加上overflow:hidden; 那么, 父亲就能被儿子撑出高了。这是一个偏方。

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>

浮动清除方法5: 利用伪元素清除浮动

ss章节，本文仅列出笔者任务相对重要的知识点，且介绍上，针对重点。当然，遗漏很正常，希望能收到你的意见。

1.盒子模型

盒子模型，个人的理解，就是一个来装html标签的容器,包装的内容包括content+padding+border+margin。由这四个组成我们的"盒子"。

我们日常可能会遇到不同的浏览器，元素的高宽不一致。除了可能是浏览器内置的margin跟padding不同之外，也可能是IE跟w3c的盒子模型组成不同。

以下是两种不同盒子的分类：

W3C盒子模型：可通过box-sizing: content-box来设置，他包含content+padding+border+margin。
IE盒子模型：可通过box-sizing: border-box来设置，content+margin。其中content包含border，padding

2.BFC

简单的个人理解，block formatting context，块级格式化上下文。产生了BFC的，形成了独立容器，他的特性就是不会在布局中影响到外边的元素。

他的特性：

1)BFC边距会重叠。
2)BFC的内外元素互相不影响
3)BFC不会与浮动元素发生重叠
4)BFC元素的高度计算会包括元素内的浮动元素的高度

触发的条件是：

1)body 根元素
2)浮动元素：float 除 none 以外的值
3)绝对定位元素：position (absolute、fixed)
4)display 为 inline-block、table-cells、flex，table-caption
5)overflow 除了 visible 以外的值 (hidden、auto、scroll)

此外，除了BFC，还有IFC、GFC、FFC的概念。我们简单了解一下。

GFC：可简单理解为grid布局
FFC：可简单理解为flex布局。
IFC:内联格式化上下文，简单理解为：inline-block。

水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。inline-block的元素的内部是一个BFC，但是它本身可以和其它inline元素一起形成IFC。

3.flex布局

flex，即弹性布局。一个由css3引入，为我们的盒子属性带来灵活性的一种布局方式。一旦父级采用了flex布局，里边的子控件将收flex布局限制，部分原本的样式（如float:left）也会失效。

基本api不做讲解，不熟悉可以看看：www.ruanyifeng.com/blog/2015/0…

特别注意：flex:0 0 30%的意义：等于flex-grow=0（默认不放大）+flex-shrink=0（不缩小）+flex-basis=30%（项目占据主轴的空间）

4.css3新特性

背景，支持RGBA透明度，一次多背景图
支持媒体查询
支持阴影，渐变，阴影
支持边框图片，border-image: url(border.png) 30 30 round
支持transform位移系列
支持过渡效果transition
支持自定义字体
引入flex/grid布局
引入多种选择器
其他不做详细说明，有兴趣搜一下css3新特性

5.图片格式

前端的图片分类格式,其实是性能优化的很大部分。选择好图片的类型，对前端的性能影响非常大。

而前端对图片的精髓，一方面是对图片大小的评估，一方面是对图片的类型选择。

他的大小可以这样判断：

比如一张200*200的图片大小，这时候，他的像素点有40000个。每个像素有 4 个通道，所以一共有160000个字节,所以，我们评估该图片的大小大概为：160000/1024 约等于 156（KB），如果大很多，说明图片大小有优化控件。如果小很多，说明此时是模糊的。

6.移动端适配

列举一下笔者所知道的适配方式：

1）媒体查询。该方案的话，个人觉得是最佳的方案，也是常用UI库非常喜欢的用处理方式之一。唯一不好的是：多套媒体方案，也意味多份的工作量。
2）vw/vh 利用单位vw/vh进行布局。该方案的话，对整体的布局还是相对稳定，但是对部分细节等处理还是不优化。且遇到手机屏幕差异较大的话，会出现严重的视差。
3）rem 相对稳定的方法。根据屏幕大小计算出font-size;但是只能求良好，很难求精。如果UI对一像素非常的敏感，这个方案可能是个非常糟糕的选择。
4）类似小程序rpx。相信原生小程序开发者都用过rpx。这里其实原理有点类似rem。但是，却不是按屏幕大小去计算，而是不同的屏幕定义了自己的标准。

7.常见兼容性

这个问题本次只列举了几个常见的，非全部列出。如需具体，可另查资料。

1）间距差异是否大，导致文本换行，或者间隔太大。原因：每个浏览器的margin和padding的默认值不同。解决方案：全局文件设置统一默认margin和padding。

2）图片默认有间距原因：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）解决方案：使用float属性为img布局

3）较小的高度（小于10px），时，ie可能会超出高度原因：IE有一个默认的行高的高度解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

为min-height本身就是一个不兼容的CSS属性

4）透明度兼容设置原因：不同浏览器各自透明度关键字不统一。解决方案：filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;

5）IE的hover图片会闪烁原因：IE6的每次触发 hover 的时候都会重新加载解决方案：提前缓存文件。document.execCommand("BackgroundImageCache", false, true);

8.垂直居中

该回复只给予思路，没有具体写法。因为我觉得大家都应该懂。

已知宽高：1.margin 自己算高宽　 2.定位 + margin-top + margin-left 3.定位 + margin:auto

未知宽高：1.transform 但有IE兼容的问题 2.flex 布局 3.display: table-cell

9.实现1px

首先你可能需要了解一下物理像素跟独立像素的区别。

物理像素：一个物理像素是显示器（手机屏幕）上最小的物理显示单元，如：iPhone6上就有7501334个物理像素颗粒。独立像素：逻辑像素，程序使用的虚拟像素。如：iPhone6上就有375677个独立像素。

那么如何实现1px呢：1.利用 transfrom 的 scale 缩放来实现 2.利用 background 的 line-gradient 线性渐变来实现 3.meta viewport修改成1比0.5。这样整个屏幕的大小缩小了0.5。4.利用box-shadow

10.三列布局

该回复只给思路

1.CSS浮动第一个float:left，第二个float:right，第三个设置margin-left和margin-right

2.绝对定位法第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right

3.flex布局

11.样式优化

初步聊聊个人的样式优化方案如下：

1.避免css层级太深。有兴趣了解一下css tree如何跟html tree融合成dom tree。2.首屏（特别是缓冲效果图）可适当使用内联元素。这样有利于更快的显示。3.异步加载CSS。非首次重要引入的css文件，不放在head里边。这样会引起阻塞。4.减少回流的属性。如display:none可以考虑使用visibility 5.适当使用GPU渲染。如tranfrom等。6.css动画的性能，是远远的大于js动画性能。7.利用工具压缩，去重。

12.伪类和伪元素

伪类和伪元素的根本区别在于：它们是否创造了新的元素

伪类，指可以通过元素选择器，就可以实现的效果，如frist-child，active等。而伪元素，是指需要通过创元素，才可以实现的效果，如first-letter,before，after等。

具体元素跟写法有兴趣，可参考：blog.csdn.net/qq_27674439…

喜欢的老铁，加个关注！今后会分享更多的前端干货，欢迎点赞转发关注[比心][比心][比心]

来源 https://juejin.im/post/6867715946941775885

在线咨询

上一篇：一文快速读懂CSS属性选择器
下一篇：使用HTML添加表格1（基本元素）-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「Web前端开发」-16-CSS浮动

1.盒子模型

2.BFC

3.flex布局

4.css3新特性

5.图片格式

6.移动端适配

7.常见兼容性

8.垂直居中

9.实现1px

10.三列布局

11.样式优化

12.伪类和伪元素

您的项目需求