关于CSS中的float可能出现的小问题

前言：最近学习CSS的float所遇到点小问题，然后顺便分享给大家。

一、什么是CSS以及float

（一） CSS概述

CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

（二） float概述

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

二、float可能出项的问题

（一) 当没有父级块明确的边界时,float可能没有预想的效果

　　　　1.没有明确的边界

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>floatTest</title>

         <style type="text/css">

             #d1 {

                 float: left;

                 width: 100px;

                 height: 100px;

                 background-color: red;

             }

             #d2 {

                 float: left;

                 width: 100px;

                 height: 100px;

                 background-color: green;

             }

             #d3 {

                 float: left;

                 width: 100px;

                 height: 100px;

                 background-color: blue;

             }

         </style>

     </head>

     <body>

         <div style="width:auto; border:solid 1px black;">

         <!--<div style="width: 300px;height: 300px;border: solid 1px black;">-->

             <div id="d1">

                 d1

             </div>

             <div id="d2">

                 d2

             </div>

             <div id="d3">

                 d3

             </div>

         </div>

     </body>

 </html>

浮动前

浮动后

　　　　2.有明确的边界时

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>floatTest</title>

         <style type="text/css">

             #d1 {

                 float: left;

                 width: 100px;

                 height: 100px;

                 background-color: red;

             }

             #d2 {

                 float: left;

                 width: 100px;

                 height: 100px;

                 background-color: green;

             }

             #d3 {

                 float: left;

                 width: 100px;

                 height: 100px;

                 background-color: blue;

             }

         </style>

     </head>

     <body>

         <!--<div style="width:auto; border:solid 1px black;">-->

         <div style="width: 200px;height: 200px;border: solid 1px black;">

             <div id="d1">

                 d1

             </div>

             <div id="d2">

                 d2

             </div>

             <div id="d3">

                 d3

             </div>

         </div>

     </body>

 </html>

浮动前

浮动后

　　　　3.总结

　　　　　　在选择需要进行浮动操作的时候，一定要明确浮动的边界，这样才能出想要的效果。

（二) 对div块的设定导致的问题

　　　　1.div范围定义较小

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>floatTest</title>

         <style type="text/css">

             .divs {

                 /*float: right;*/

             }

             .divs div {

                 float: right;

             }

             #d1 {

                 width: 100px;

                 height: 100px;

                 background-color: red;

             }

             #d2 {

                 width: 100px;

                 height: 100px;

                 background-color: green;

             }

         </style>

     </head>

     <body>

         <div style="width: 700px;height: 700px;border: solid 1px black;">

             <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs">

                 <div id="d1">

                     d1

                 </div>

                 <div id="d2">

                     d2

                 </div>

             </div>

         </div>

     </body>

 </html>

浮动前

浮动后

　　　　2.合理的div块定义

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>floatTest</title>

         <style type="text/css">

             .divs {

                 float: right;

             }

             .divs div {

                 /*float: right;*/

             }

             #d1 {

                 width: 100px;

                 height: 100px;

                 background-color: red;

             }

             #d2 {

                 width: 100px;

                 height: 100px;

                 background-color: green;

             }

         </style>

     </head>

     <body>

         <div style="width: 700px;height: 700px;border: solid 1px black;">

             <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs">

                 <div id="d1">

                     d1

                 </div>

                 <div id="d2">

                     d2

                 </div>

             </div>

         </div>

     </body>

 </html>

浮动前

浮动后

　　　　3.总结

当我们将整个divs块下的元素都进行了右浮动，但是我们以为这就是将divs块进行了移动，但是其实只是d1和d2块在divs块中进行了移动，divs块并没有动，所以当我们要移动一整块的divs和分别移动的效果是完全不一样的，所以一定要注意这样的小细节。