详解css中的float

发布时间：2017-01-10 15:26:58 作者：Mcbai

本文主要介绍了css中float的用法，以及网页中常用的几种布局方式。具有一定的参考价值，下面跟着小编一起来看下吧

float与margin

两个相邻的浮动元素，当第一个浮动元素（不论是左浮动还是右浮动）的宽度为100%时，第二个浮动元素会被挤到下面，通过添加负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="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值，让它回到上面。

1.左右两侧都不定宽

效果图：

html代码：

<div class="comment">
    <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
    <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>
  </div>

核心点：

.avatar元素左浮动，.content元素的display属性设为table-cell，其实这里的.content元素不一定非要设置display为table-cell才行，只要是能触发BFC/haslayout的就行，比如：

float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)

不过因为这里的.content元素是自适应的，不能定宽，而且里面包含块级元素，所以只能设置overflow属性。

css代码：

* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.avatar {
  float: left;
  margin-right: 20px;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.content {
  display: table-cell;
}
.date {
  font-size: 14px;
  color: #666;
}
.text {
  margin: 20px 0;
}

2.右侧定宽流式布局

效果图：

html代码：

<div class="wrap">
  <ul class="list">
    <li class="item">
      <div class="content-wrap">
        <div class="content">
          <div class="author">
            <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
            <span class="name">李荣浩</span>
            <span class="date">2016-01-22</span>
          </div>
          <a href="#" class="title">不将就</a>
          <p>互相折磨到白头 悲伤坚决不放手 开始纠缠之后 才又被人放大了自由 你的暴烈太温柔 感情又痛又享受 如果我说不吻你不罢休 谁能逼我将就</p>
          <div class="meta">
            <span class="category-tag">歌曲</span>
            <span class="msg-tag">喜欢·5000</span>
          </div>               
        </div>
      </div>
　　　
      <a href="#" class="thumbnail"><img src="images/pic.jpg" alt="图片"></a>   
    </li>
  </ul> 
</div>

核心点：

1：当第一个浮动元素的宽度为100%时，第二个元素会自动换行，紧挨着第一个元素，这时可以给第二个浮动元素添加负margin值，使它上去

2：第一个浮动元素.content外面有一个包裹元素，方便给.content元素添加padding-right值，让左边的内容和右边图片之间留出空隙

其实双飞翼布局的思想也是包含上面两点。

css代码：

* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.item {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
.content {
  float: left;
  padding-right: 180px;
}
.avatar {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
}
.name {
  vertical-align: middle;
}
.date {
  font-size: 14px;
  color: #666;
  vertical-align: middle;
}
.title {
  display: block;
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  color: #333;
}
.thumbnail {
  float: left;
  margin-left: -120px;
}
.thumbnail img {
  width: 120px;
  height: 120px;
}
.meta {
  margin-top: 15px;
  font-size: 14px;
}
.category-tag {
  display: inline-block;
  padding: 0 8px;
  margin-right: 10px;
  border: 1px solid #ea6f5a;
  border-radius: 3px;
  color: #ea6f5a
}
.msg-tag {
  color: #999;
}

3.两侧固定，中间自适应的三栏布局

现在三栏布局很少了，如果要用到，请直接百度双飞翼布局或者圣杯布局。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

Tag：css float

深入理解和应用css中Float属性
本篇文章主要介绍了css中Float属性，顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
2016-12-21
CSS重要属性之float学习心得(分享)
下面小编就为大家带来一篇CSS重要属性之float学习心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-18
css(display,float,position)深入理解
下面小编就为大家带来一篇css(display,float,position)深入理解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-17
老生常谈css中float的用法
下面小编就为大家带来一篇老生常谈css中float的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-18
CSS使用float属性设置浮动元素的实例教程
这篇文章主要介绍了CSS使用float属性设置浮动元素的实例教程,包括使用overflow清除浮动的方法,需要的朋友可以参考下
2016-07-07
使用CSS的overflow属性防止float撑开div的方法
我们在使用float设定浮动元素的时候经常会遇到撑破div的情况,其中一种解决方法即是利用overflow: hidden,这里我们就来看一下使用CSS的overflow属性防止float撑开div的方法:
2016-07-07
CSS清除浮动float的三种方法小结
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结，感兴趣的朋友跟随脚本之家小编一起
2018-03-13

详解css中的float

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容