CSS 之 float

2016-02-26 本文已影响157人 JimmyChung

想必只要是写过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元素用于清除浮动，但是它是不可见的。较多大型网站使用该方法清除浮动。

CSS 之 float

flaot属性与display属性

浮动清除

猜你喜欢

热点阅读