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

浮动

  浮动元素作为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:100px;height:100px;background:#3CF;float:left;}
 9 span{width:100px;height:100px;background:#F09;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 .first{width:100px;height:100px;background:#00F;float:left;}
 9 .second{width:200px;height:200px;background:#0F0;}
10 
11 </style>
12 </head>
13 <body>
14 
15 <div class="first">first</div>
16 <div class="second">second</div>
17 
18 </body>
19 </html>

    • 原因：浮动元素走文档流，但不占文档流（这也就是它为什么叫浮动的原因了）【注】：HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块元素)换行。）

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动问题1</title>
 6 <style>
 7 
 8 .first{width:100px;height:100px;background:#00F;float:left;}
 9 .second{width:200px;height:200px;background:#0F0;float:left;}
10 
11 </style>
12 </head>
13 <body>
14 
15 <div class="first">first</div>
16 <div class="second">second</div>
17 
18 </body>
19 </html>

  • 高度塌陷

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动问题2</title>
 6 <style>
 7 
 8 .box{width:300px;border:2px solid #603;}
 9 .box .left{width:100px;height:100px;background:blue;float:left;}
10 .box .right{width:100px;height:100px;background:yellow;float:right;}
11 
12 .box2{width:400px;border:2px solid #0F0;}
13 .box2 .left2{width:100px;height:100px;background:#000;float:left;}
14 .box2 .right2{width:100px;height:100px;background:#96F;float:right;}
15 
16 </style>
17 </head>
18 <body>
19 
20 <div class="box">
21     <div class="left">1</div>
22     <div class="right">2</div>
23 </div>
24 
25 
26 <div class="box2">
27     <div class="left2" style="color:#FFF">3</div>
28     <div class="right2">4</div>
29 </div>
30 
31 </body>
32 </html>

    • 原因：元素转为浮动元素后，虽走文档流但不占文档流的具体位置，无法撑开未设置固定高度的父元素。

    • 方案：

      • 给浮动元素的父元素设置足够的高度（这种方式还要设置固定的高度，不是最佳）

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动问题2</title>
 6 <style>
 7 
 8 .box{width:300px;height:200px;border:2px solid #603;}
 9 .box .left{width:100px;height:100px;background:blue;float:left;}
10 .box .right{width:100px;height:100px;background:yellow;float:right;}
11 
12 .box2{width:400px;height:200px;border:2px solid #0F0;}
13 .box2 .left2{width:100px;height:100px;background:#000;float:left;}
14 .box2 .right2{width:100px;height:100px;background:#96F;float:right;}
15 
16 </style>
17 </head>
18 <body>
19 
20 <div class="box">
21     <div class="left">1</div>
22     <div class="right">2</div>
23 </div>
24 
25 
26 <div class="box2">
27     <div class="left2" style="color:#FFF">3</div>
28     <div class="right2">4</div>
29 </div>
30 
31 </body>
32 </html>

      • 设置一个属性overflow:hiddden（注：overflow能自动检索子元素的高度，并给父元素默认设置）（这种方式也不是最佳，因为这个属性值自带有隐藏溢出的效果，所以有时会影响其他的效果）

      • 在下方加一个块元素并为其设置一个属性clear:both（清除浮动：让本元素上方的元素拥有文档流，both是指清除两边的浮动，也就相当于清除最高的那一块，其他属性值无用，因为left和right只是一方，并不能清除所有的浮动）

      • 优化版：万能清除法（基于方法三）——我们可以把方法三中增加的块元素，用伪类来实现，具体内容是.clear:after{content:"";clear:both;display:block;},clear是自己起的名字，冒号后面的意思是在这个元素内部的最后增加一个伪类，我们用属性让这个伪类变成没有实际内容块元素，而且，使它上面的元素都拥有文档流，以后只要需要解决高度塌陷问题，就在父元素上面加一个名为clear的class即可（当然，你必须要把它放在你的不断更新的公共样式表中，并导入）。

 总结

  综上所述，设置浮动时一定要考虑这两个问题：

  • 一个元素浮动，它的兄弟元素也要浮动（兄弟之间：一荣俱荣，一损俱损）

  • 一个元素浮动，它的父元素要设置足够的高度（父子之间：不管儿子能力如何，父亲都能提供一个合适的空间供其发展）

  呃，又开始扯了，请大家见谅，说实话，有时我也忍不了自己😂，求求你们阻止我！！！！回归正题，浮动除了上述两大新手拦路虎，还有一些知识点需要注意，比如：

  • 浮动不居中，居中不浮动

  • 行元素的宽度和高度是被文本撑开的大小，也就是和文本大小相同，要想设置宽度和高度，就要把行元素变为浮动元素，或者按父元素的路线去找能设置宽度高度的父元素

　　　　　　　　　　　

 

posted @ 2019-03-23 11:58  AI-fisher  阅读(275)  评论(0)  编辑  收藏  举报