float 常见用法与问题

float 常见用法与问题

技术杂谈小彩虹2021-07-13 18:30:52140A+A-

float 属性绝对是众多切图仔用的最多的 CSS 属性之一,它的用法很简单,常用值就 leftrightnone 三个,但是它的特性你真的弄懂了吗?

我会在这里介绍我对 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。

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

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

image

代码实现:

<!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="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. 右侧定宽流式布局

image

<!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;
}

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们