css中的float

float的四个参数

float: left(左浮动) | right(右浮动) | none(不浮动) | inherit(继承浮动)

 我越来越发现,这个靠记忆很难全部记住,大家还是要多手动练习,比如今天文字居中,我就给忘记了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之cssfloat浮动属性</title>
<style type="text/css">
      *{padding: 0;margin: 0;
         }
      .test1{width:100px;
            height:100px;
            margin: 10px;
            background: red;
            float: inherit;
            line-height: 100px;
            text-align:center 
                 }
            .test2{width: 400px;
                height: 400px;
                background: green;
                float: right;
                  }
    </style>
</head>
<body>
   <div class="test2">
      <div class="test1">a</div>
      <div class="test1">b</div>
   </div>
</body>
</html>

大家练习的时候,注意文字的顺序,大家也可以给test1设置inherit,然后给test2设置float,看看继承属性

带有float属性的元素都会变成块状元素,float会使我们所设置的元素脱离标准流,但是它仍旧会占据正常的文本空间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之cssfloat浮动属性</title>
<style type="text/css">
      .test1{width:100px;
            height:100px;
            background: red;
            float: left;
                 }
           .test2{width: 500px;
                  height: 500px;
                  background: #BBFFFF;
                 }     
 
    </style>
</head>
<body>
     <div class="test2">
        <span class="test1"></span>
  臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。
先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。
       先帝知臣谨慎,故临崩寄臣以大事也。
受命以来,夙夜忧叹,恐付托不效,以伤先帝之明,故五月渡泸,深入不毛。
今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。
此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。

愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。
若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。

今当远离,临表涕零,不知所言。
    </div>
</body>
</html>

通过上例我们可以发现,float可以实现文字环绕的效果,并且它会让我们所设置的元素变成块状元素(span是行内元素,不是块状元素。),占据文本空间

CSS定位机制

  1. 标准流(普通流)

  2. 定位

  3. 浮动


浮动使得元素脱离了正常的标准流,它也会影响周围元素的变化,一旦当前的元素经行了浮动,其它的元素也会收到干扰,

浮动的元素不再占有原始的空间,它会导致父元素无法检测子元素的长度以及宽度,因而会导致元素的坍陷

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之cssfloat浮动属性</title>
<style type="text/css">
      *{margin: 0;padding: 0;}
      .test1{width: 600px;
             height: auto;
             border:2px solid red;
            }
      .test2{width: 100px;
             height: 50px;
             background:green;
             border: 1px solid #66B3FF; 
             float: left;
            }
       .test3{width: 100px;
           height: 100px;
           background: blue;
            }     
    </style>
</head>
<body>
   <div class="test1">
      <div class="test2"></div>
      <div class="test2"></div>
      <div class="test2"></div>
      <div class="test2"></div>
      <div class="test2"></div>
    </div>
    <div class="test3"></div>
</body>
</html>

通过上例我们发现,当我们没有使用float之前,test1(父元素)的高度是被撑开自适应的。当我们使用了float以后,test1的高度没有了。当我们再给test1下面增加test3(兄弟元素)时,本来应该跟随test2(子元素)的蓝色的已经到了绿色下放,这也是一个浮动引起的异位。

那么现在这些问题怎么解决呢?

  1. 手动给父元素添加高度

  2. 通过clear清楚内部和外部浮动

  3. 给父元素添加overfloat属性并结合zoom:1使用

  4. 给父元素添加浮动

增加高度的话,如果我们增加子元素,那么高度因为我们已经设置好了,就会出现如下图所示

很明显这并不是一个非常好的办法,这个时候我们可以用clear属性

clear: none | left(不允许左边有浮动对象) | right(不允许右边有浮动对象) |   both(不允许有浮动对象)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之cssfloat浮动属性</title>
<style type="text/css">
      *{margin: 0;padding: 0;}
      .test1{width: 600px;
             height: auto;
             border:2px solid red;
             overflow: hidden; /*处理溢出问题,overfl:auto;也可以*/
             zoom:1;/*IE专用属性,可以通过子元素的总体高度来放大缩小父元素的高度,从而导致父元素拥有高度*/
            }
      .test2{width: 1000px;
             height: 50px;
             background:green;
             border: 1px solid #66B3FF; 
             float: left;
             
            }
       .test3{width: 100px;
           height: 100px;
           background: blue;clear: both;
            }     
    </style>
</head>
<body>
  <div class="test1">
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
  </div>
  <div class="test3"></div>
</body>
</html>

大家肯定发现了,我虽然设置了子元素的宽度是1000px,但是它实际的效果只有600px,有400px被截断 ,所以clear也不能完全的避免这个浮动引起的问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之cssfloat浮动属性</title>
<style type="text/css">
      *{margin: 0;padding: 0;}
      .test1{width: 600px;
             height: auto;
             border:2px solid red;
             float: left;
            }
      .test2{width: 100px;
             height: 50px;
             background:green;
             border: 1px solid #66B3FF; 
             float: left;
             
            }
       .test3{width: 100px;
           height: 100px;
           background: blue;clear: both;
            }     
    </style>
</head>
<body>
  <div class="test1">
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
   <div class="test2"></div>
  </div>
  <div class="test3"></div>
</body>
</html>

大家肯定发现了,我们的父元素被完美才撑开了,兄弟元素也不被遮挡了

当然。。。我百度发现,还可以通过 before: :伪类,可以解决,大家自己百度看看这个是什么~