float 常见用法与问题--摘抄

float 属性绝对是众多切图仔用的最多的 CSS 属性之一，它的用法很简单，常用值就 left、right、none 三个，但是它的特性你真的弄懂了吗？

我会在这里介绍我对 float 的认识与使用，以及使用过程中遇到的问题。

对 float 的认识

1. float 元素具有 BFC 模型特性

当给元素添加 float 属性后，元素便会具有 BFC 模型的效果。比如给内联元素 span 等添加 float 属性后，内联元素也可以设置宽高和 margin。

2. float 与 position

当给元素添加了绝对定位 absolute 或者 fixed 后，元素的浮动效果就会消失，即便 float 属性设置在 position 属性之后。

3. 脱离标准文档流

浮动元素会脱离标准文档流，会给它后面的兄弟元素造成影响，如果要清楚对兄弟元素的影响，只需要给紧邻的兄弟元素添加 clear: both 就好，但是紧邻的兄弟元素的 margin 依然是相对于父元素的。

4. 破坏父元素高度

当父元素没有设置高度，也不是 BFC 模型时，如果给子元素添加浮动效果，那么便会造成父元素高度的坍塌。

要清除浮动给父元素带来的破坏效果，方案也有很多，最直接的是把父元素变成 BFC 模型的元素就行。

不过大家使用最多的方式应该是添加一个 .clearfix 的类，不过对于这个类的写法有很多种，而我一般使用的是张鑫旭老师的方法，代码量最少：

.clearfix {

    zoom: 1;

}

.clearfix::after {

    content: '';

    display: table;

    clear: both;

}

5. float 与 padding

浮动元素不会超过父元素的内边距 padding。

利用第五点与第三点，我们在方便的实现一些布局效果并减少层级嵌套。

比如我们通常会遇到如下的样式布局：

代码实现：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <title>浮动</title>

</head>

<body>

  <div class="container">

    <p class="tt">1\. 这是标题</p>

    <button class="btn">删除</button>

    <div class="con">

      这里是具体的内容

    </div>

  </div>

</body>

</html>

.container {

  width: 400px;

  padding: 20px;

  border: 1px solid #ccc;

}

.tt {

  float: left;

  margin: 0;

  width: 200px;

  overflow: hidden;

}

.btn {

  float: right;

}

.con {

  padding-top: 10px;

  clear: both;

}

标题栏既有文本也有删除等按钮，我们直接使用 float，而下面的内容部分我们通过 clear: both; 来让显示位置正确。标题栏部分和内容部分的间距则通过给 .con 元素添加 padding 而不是 margin 来控制，因为它的 margin 是相对于父容器的。

6. float 与 margin

两个相邻的浮动元素，当第一个浮动元素的宽度为100%时，第二个浮动元素会被挤到下面，通过添加负的 margin-left 或者 margin-right 值（绝对值最少等于它自身的宽度），可以使它回到第一行。

常见布局

利用这一点，我们也可以实现很多布局，比如：

在书写html代码时，我们通常的习惯根据UI样式，从左往右来写代码，但有时候右侧的内容比较重要，所以它的html结构需要放在左侧内容上面，让它更早的加载。

  <div class="comment">

    <!-- 右侧重要内容 -->

    <div class="content">

      <div class="author">

        <span class="name">哇哈哈</span>

        <span class="date">2016-78-55</span>

      </div>

      <p class="text">吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！</p>

      <div class="meta">

        <span class="msg-tag">赞</span>

        <span class="msg-tag">回复</span>

      </div>

    </div>

    <!-- 左侧内容 -->

    <a href="#" class="avatar"><img src="data:images/header.jpg" alt="头像"></a>

  </div>

* {margin:0; padding:0;}

li {list-style: none;}

a {text-decoration: none;}

body {font-family: '微软雅黑';}

.wrap {

  width: 800px;

  margin: 50px auto;

}

.content {

  float: right;

  margin-left: 100px;

}

.date {

  font-size: 14px;

  color: #666;

}

.text {

  margin: 20px 0;

}

.avatar {

  float: left;

  margin-right: -80px;

}

.avatar img {

  width: 80px;

  height: 80px;

  border-radius: 50%;

}

如上面图的效果，尽管在UI上，.content 元素在 .avatar 右边，但我们在 html 结构中，仍然需要把 .content 元素放到 .avatar 元素前面，这个时候就可以通过给 .content 元素设置为右浮动，然后给 .avatar 元素设置左浮动，再添加负 margin-right 值，让它回到上面。

2. 右侧定宽流式布局

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <title>test</title>

</head>

<body>

  <div class="content">

    <div class="box1">

      <div class="inner"></div>

    </div>

    <div class="box2"></div>

  </div>

</body>

</html>

.content {

  width: 500px;

  overflow: hidden;

}

.box1 {

  box-sizing: border-box;

  float: left;

  width: 100%;

  height: 50px;

  padding-right: 220px;

  border: 1px solid #ccc;

}

.inner {

  width: 100%;

  height: 40px;

  border: 1px solid #f23;

}

.box2 {

  float: right;

  width: 200px;

  height: 30px;

  margin-left: -100%;

  border: 1px solid #2fe;

}