剑指前端（前端入门笔记系列）——浮动

时间：2019-03-23 13:02:24 阅读：141 评论：0 收藏：0 [点我收藏+]

浮动

浮动元素作为CSS中一个强大的元素，在刚开始使用时既好用又难用，这与浮动的特性有关系，那我们先来看一下它的特性有哪些。

特性

特性一：浮动元素会靠着浮动元素，当父元素宽度不够时，浮动元素会在下一行显示（可以理解为会被挤下去）。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动特性1</title>
 6 
 7 <style>
 8     #father{width:300px;height:200px;background:yellow;font:14px/100px "";text-align:center;}
 9     #father span{line-height:350px;overflow:hidden;}    /*只是为了让父元素中的文本偏右下角显示*/
10     #father div{float:left;width:101px;height:100px;}
11     #father div.son-f{background:red;}
12     #father div.son-s{background:green;}
13     #father div.son-t{background:gray;}
14 
15     span{}
16 </style>
17 
18 </head>
19 
20 <body>
21     <div id="father">
22             <div class="son-f">101px*100px</div>
23             <div class="son-s">101px*100px</div>
24             <div class="son-t">101px*100px</div>
25             <span>300px*200px</span>
26         </div>
27 </body>
28 </html>

技术分享图片

特性二：只要设置了float属性，元素本身的类型就会发生变化，都会变为浮动元素。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动特2</title>
 6 <style>
 7 /*任何元素设置了浮动 都变成了 浮动元素*/
 8 div{width:200px;height:200px;background:yellow;float:left;}
 9 span{width:200px;height:200px;background:red;float:left;}
10 
11 </style>
12 </head>
13 <body>
14 
15 <div>div</div>
16 <span>span</span>
17 
18 </body>
19 </html>

技术分享图片

常见问题

一般来说，强大的功能用的好则异常强大，用的不好则可能引火自焚，说的虽然有点夸张，但是也是为了强调一定要养成良好的习惯，要不然对于初学者（经验不多，不能自己debug的）来说，浮动出现的问题可能会让你心态崩溃，然后从入门到跑路，以下列出两个浮动经常出现的问题：

问题一：一个元素浮动，另一个元素不浮动，这两个元素会重叠

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动坑1</title>
 6 <style>
 7 /* 浮动元素不占文档流 */
 8 /*
 9 一个元素浮动 另一个没浮动 2个元素会重叠
10 解决：要么都浮动 要么都不浮动
11 
12 */
13 .one{width:300px;height:200px;background:red;float:left;}
14 .two{width:400px;height:300px;background:yellow;}
15 </style>
16 </head>
17 <body>
18 
19 <div class="one"></div>
20 <div class="two"></div>
21 
22 </body>
23 </html>

技术分享图片

原因：浮动元素走文档流，但不占文档流（这也就是它为什么叫浮动的原因了）

解决方案：兄弟元素要么都浮动要么都不浮动

问题二：高度塌陷

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动坑2-高度塌陷</title>
 6 <style>
 7 /* 子元素无法撑开父元素会产生高度塌陷问题 */
 8
 9 10  
11 .box{width:500px;border:2px solid black;}
12 .box .left{width:100px;height:100px;background:blue;float:left;}
13 .box .right{width:100px;height:100px;background:yellow;float:right;}
14 
15 .box2{width:500px;height:200px;border:2px solid pink;}
16 .box2 .left2{width:100px;height:100px;background:orange;float:left;}
17 .box2 .right2{width:100px;height:100px;background:red;float:right;}
18 
19 </style>
20 </head>
21 <body>
22 
23 <div class="box">
24     <div class="left"></div>
25     <div class="right"></div>
26 </div>
27 
28 
29 <div class="box2">
30     <div class="left2"></div>
31     <div class="right2"></div>
32 </div>
33 
34 </body>
35 </html>

技术分享图片

原因：父元素没有设置足够的高度

解决方案：1.给浮动元素的父元素设置足够的高度

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动坑2-高度塌陷</title>
 6 <style>
 7 /* 子元素无法撑开父元素会产生高度塌陷问题
 8 
 9 解决:给父元素设置“足够”的高度
10  */
11 .box{width:500px;height:200px;border:2px solid black;}
12 .box .left{width:100px;height:100px;background:blue;float:left;}
13 .box .right{width:100px;height:100px;background:yellow;float:right;}
14 
15 .box2{width:500px;height:200px;border:2px solid pink;}
16 .box2 .left2{width:100px;height:100px;background:orange;float:left;}
17 .box2 .right2{width:100px;height:100px;background:red;float:right;}
18 
19 </style>
20 </head>
21 <body>
22 
23 <div class="box">
24     <div class="left"></div>
25     <div class="right"></div>
26 </div>
27 
28 
29 <div class="box2">
30     <div class="left2"></div>
31     <div class="right2"></div>
32 </div>
33 
34 </body>
35 </html>