CSS 之 float

想必只要是写过CSS的同学,对float属性肯定不陌生。float是在CSS很常用的属性之一了。但有的时候,常用容易变成滥用,哪里都来一个float,也就造就了一些坑。

flaot属性与display属性

有的时候看回自己刚入行时写的CSS,在浮动块的相关代码时总是有类似的代码片段

div {
    width: 200px;
    height: 200px;
    display: inline-block;
    float: left; 
}

不知道大家觉没觉得上面的代码有问题。答案是明确的,而问题在于display的设置上。

设置了float属性值为非none的元素,display的属性值都会变成block,无论该元素原先的display属性值是什么

下面我们来看看证据,请看代码:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            background-color: black;
            color: white;
            display: inline;
              //同理,可把display的值改成inline-block,block
            float: left;
        }
    </style>
  </head>
  <body>
    <div>hello</div>
  </body>
  </html>

下面是浏览器计算的结果,display的值始终为block

  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  display: block;
  float: left;
  height: 16px;
  width: 37.046875px;

所以在元素设定float属性的时候,不必去重复设定display的值

浮动清除

为什么要清除浮动
让元素浮动会导致其父族元素的高度崩塌,从而会导致一些图文围绕的问题(如果原意并非是要图文围绕)。所以清除浮动事实上就是让父元素拥有高度。

清除浮动常用的三种方式:

  • 父元素overflow:hidden
  • 插入clear-fix div
  • :after方法

父元素overflow:hidden

  • 代码:

    <!DOCTYPE html>
      <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style type="text/css">
              .wrap{
                overflow: hidden;
              }
              .left{
                width: 200px;
                height: 200px;
                background-color:  #42b983;
                float: left;
                border: 1px solid #bbb;
              }
            </style>
          </head>
          <body>
            <div class="wrap">
              <div class="left"></div>
            </div>
            <p>this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text</p>
          </body>
      </html>
    
  • 概述:为浮动元素的父元素设置overflow:hidden.使父元素扩展至浮动元素的高度(浏览器会自动计算浮动元素的最高高度作为父元素高度).不能同时再设置height.

插入clear-fix div

  • 代码:

    <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style type="text/css">
              .clear-fix{
                  clear: both;
              }
    
              .left{
                  width: 200px;
                  height: 200px;
                  background-color:  #42b983;
                  float: left;
                  border: 1px solid #bbb;
              }
          </style>
      </head>
      <body>
              <div class="left"></div>
              <div class="clear-fix"></div>
          <p>this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text</p>
      </body>
      </html>
    
  • 概述:在浮动元素后添加一个clear-fix的div块元素,为该元素设置clear:both,以达到清除浮动的作用。此方法兼容性较好。但是在使用浮动较多的情况下,会产生较多额外的div元素,使得html难以维护。

:after方法

  • 代码:

     <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style type="text/css">
              .wrap:after{
                  display: block;
                  content: "";
                  clear: both;
                  visibility: hidden;
                  height: 0;
              }
              .left{
                  width: 200px;
                  height: 200px;
                  background-color:  #42b983;
                  float: left;
                  border: 1px solid #bbb;
              }
          </style>
      </head>
      <body>
          <div class="wrap">
              <div class="left"></div>
          </div>
          <p>this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text</p>
      </body>
      </html>
    
  • 概述:这个方法与clear-fix方法相似。但不用添加额外的div。在浮动元素的父元素中使用after伪类,相当于在父元素的后面添加一个div元素用于清除浮动,但是它是不可见的。较多大型网站使用该方法清除浮动。

    原文作者:JimmyChung
    原文地址: https://www.jianshu.com/p/ba54c42afeec
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞