关于CSS中的float可能出现的小问题
- 前言：最近学习CSS的float所遇到点小问题，然后顺便分享给大家。
一、什么是CSS以及float
（一） CSS概述
CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
（二） float概述
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
二、float可能出项的问题
（一) 当没有父级块明确的边界时,float可能没有预想的效果
1.没有明确的边界
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 #d1 { 9 float: left; 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 } 14 15 #d2 { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 22 #d3 { 23 float: left; 24 width: 100px; 25 height: 100px; 26 background-color: blue; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div style="width:auto; border:solid 1px black;"> 33 <!--<div style="width: 300px;height: 300px;border: solid 1px black;">--> 34 <div id="d1"> 35 d1 36 </div> 37 <div id="d2"> 38 d2 39 </div> 40 <div id="d3"> 41 d3 42 </div> 43 </div> 44 45 </body> 46 47 </html>
浮动前
浮动后
2.有明确的边界时
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 #d1 { 9 float: left; 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 } 14 15 #d2 { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 22 #d3 { 23 float: left; 24 width: 100px; 25 height: 100px; 26 background-color: blue; 27 } 28 </style> 29 </head> 30 31 <body> 32 <!--<div style="width:auto; border:solid 1px black;">--> 33 <div style="width: 200px;height: 200px;border: solid 1px black;"> 34 <div id="d1"> 35 d1 36 </div> 37 <div id="d2"> 38 d2 39 </div> 40 <div id="d3"> 41 d3 42 </div> 43 </div> 44 45 </body> 46 47 </html>
浮动前
浮动后
3.总结
在选择需要进行浮动操作的时候，一定要明确浮动的边界，这样才能出想要的效果。
（二) 对div块的设定导致的问题
1.div范围定义较小
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 .divs { 9 /*float: right;*/ 10 } 11 12 .divs div { 13 float: right; 14 } 15 16 #d1 { 17 width: 100px; 18 height: 100px; 19 background-color: red; 20 } 21 22 #d2 { 23 width: 100px; 24 height: 100px; 25 background-color: green; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div style="width: 700px;height: 700px;border: solid 1px black;"> 32 <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs"> 33 <div id="d1"> 34 d1 35 </div> 36 <div id="d2"> 37 d2 38 </div> 39 </div> 40 </div> 41 42 </body> 43 44 </html>
浮动前
浮动后
2.合理的div块定义
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 .divs { 9 float: right; 10 } 11 12 .divs div { 13 /*float: right;*/ 14 } 15 16 #d1 { 17 width: 100px; 18 height: 100px; 19 background-color: red; 20 } 21 22 #d2 { 23 width: 100px; 24 height: 100px; 25 background-color: green; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div style="width: 700px;height: 700px;border: solid 1px black;"> 32 <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs"> 33 <div id="d1"> 34 d1 35 </div> 36 <div id="d2"> 37 d2 38 </div> 39 </div> 40 </div> 41 42 </body> 43 44 </html>
浮动前
浮动后
3.总结
当我们将整个divs块下的元素都进行了右浮动，但是我们以为这就是将divs块进行了移动，但是其实只是d1和d2块在divs块中进行了移动，divs块并没有动，所以当我们要移动一整块的divs和分别移动的效果是完全不一样的，所以一定要注意这样的小细节。