前言

Float 是上古时代的东西, 它的效果已经基本被 Flex, Grid 取代了. 但是还是可以了解它一下. 就当学习历史呗.

参考

Youtube – HTML & CSS for Beginners Part 18: How Floats and Clears work

图片和文字 horizontal 排版 (Flex)

想把图片和文字并排像上图这样.

HTML

<body>

  <div class="container">

    <img src="./images/tifa2.PNG" />

    <p>

      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae,

      nemo repellat! Ea id perspiciatis molestias harum. Excepturi in ipsum

      alias sint natus veritatis inventore mollitia id ipsa aliquam, culpa

      quos voluptatibus nostrum voluptas magnam veniam est deleniti magni

      dolores minus cumque corporis eligendi praesentium quaerat. Nisi debitis

      aliquam inventore aliquid?

    </p>

  </div>

</body>

CSS Style

body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  .container {

    width: 40%;

    height: 80vh;

    background-color: pink;

    display: flex;

    align-items: flex-start;

    img {

      width: 50%;

    }

  }

}

如今使用 Flex 就可以了. 但是在 Flex 还没有诞生之前. 这是很难做到的.

图片和文字 horizontal 排版 (Before Flex)

把 Flex 拿掉, 效果是这样的

合理, 因为 img 是 inline, <p> 是 block.

那把 paragraph 换成 inline 的 span 呢?

虽然是并排了, 但是只有第一行. 即使把 span 设置成 vertical-align: start 也做不到想要的效果

Float come to play

这就是 Float 诞生的原因. 只要在 img 加上 float 就可以了

img {

  float: left;

}

效果

float: right 还会把 img 和 paragraph reverse 哦

How float work?

有 3 个 box, 把 box1 设置成 float:left 以后会变这样:

box1 会被抽离出 layout. 有点像 position:absolute, 于是 box2, 3 会跑到上面去了. 形成重叠.

但它很特别的一点是, box2,3 的字却不会重叠进去 box1. 而是在 box1 旁边, 这就形成了上面的 img 和 <p> 并排的效果了.

Float use in layout

Float 最初是用来做 img <p> 并排效果的, 但后来又被用于各种排版上.

上面讲的例子都是只有第一个 element 设置了 float. 当多个 element 设置 float 的时候, 它的效果会很像 Flex. 这也是它可以拿来做排版的原因.

全部 float: left

5 个 box vertical 排列. 想让它们变成 horizontal 排列可以使用 float.

下面这是 5 个 box float: left 的效果

当 2 个或以上元素 float 的时候, 它们会 horizontal 排列 (即使这个元素是 display: block, 它类似 Flex 的效果)

float: right 还可以做到 reverse 哦

当 container 的 width 不够时, 它还会有 wrap 的效果 (RWD)

部分 float: left

当只有 2 个 float: left, 效果是这样的:

依据上面提到的原理, box1, 2 会脱离 layout 漂浮起来.

box3 会和 box1 重叠, 而里面的 text 则不会.

我们看到 box3 的字体和 box4 重叠是因为 box3 的 width 没有比 box1 + box2 的 width 大, 所以它没有办法出现在 box2 的右边.

当把 box3 的 width 设置成 250px 以后的效果:

clear come to play

一般上用 float 来做排版, 不会希望被 text 影响.

比如上面的例子, box1, 2 要 horizontal, 3,4,5 不要.

正确的做法是

box1, 2 float: left,

box3, clear: both (both 表示 clear left and right 的意思)

一旦元素有 clear 属性, 那它就无视前一个 float 元素了,

总结

1. Float 能做到部分 Flex 的效果, 至于有没有 Float 可以做到但是 Flex 做不到的呢? 我没有去研究 (可能只有图片文字哪个效果 flex 做不到而已)

2. Float 会让元素飘起来这个需要注意哦. 它会影响到子孙元素的 position 对标 offset parent.

3. 开发中已经很少用到 Float 了, 但如果是为了兼容旧的游览器 (比如 email template) 就有可能会需要用到, 甚至用 table 做排版.

CSS – Float的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [CSS]float&clear浮动

    CSS float 属性 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.  可取的值 ...

  3. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  4. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  5. css float left right 中间空间城数据无法显示

    css float left right 中间空间城数据无法显示 是由于设定了width具体值太小造成,简单用%值或不设置.

  6. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  7. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  8. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  9. CSS Float（浮动）

    CSS Float(浮动) 一.CSS Float(浮动) CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常 ...

  10. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

随机推荐

  1. 介绍几款强大实用的 IDEA 插件，助力大家开发【工欲善其事必先利其器】

    俗话说:"工欲善其事必先利其器",本问介绍几款强大实用的 IDEA 插件,助力大家开发. 希望大家做一个聪明又努力的人,而不只是一个努力的人. Alibaba Java Codin ...

  2. 基于Java“萌宠之家”宠物综合服务平台设计实现(源码+lw+部署文档+讲解等)

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面 ...

  3. [oeasy]python0009 - 设置断点_break_point

    ​ 调试程序 回忆上次内容 ​py​​ 的程序是按照顺序执行的 是一行行挨排解释执行的 程序并不是数量越多越好 kpi也在不断演化 ​ 编辑 写的代码越多 出现的bug就越多 那什么是bug呢? 如何 ...

  4. AT_arc041_b 题解

    洛谷链接&Atcoder 链接 本篇题解为此题较简单做法及较少码量,并且码风优良,请放心阅读. 题目简述 给定一个 \(N \times M\) 的矩阵,此矩阵的每一个元素都向上.下.左.右 ...

  5. Volatile不保证原子性及解决方案

    原子性的意义 原子性特别是在并发编程领域,是一个极其重要的概念,原子性指的是一个操作或一组操作要么全部执行成功,要么全部不执行,不会出现部分执行的情况.这意味着原子性操作是不可分割的,它们在执行过程中 ...

  6. vscode 调试 nodejs 程序

    nodejs 服务在vscode 中的调试 1.安装vscode 略(这不用说了吧) 2.写一个能跑的nodejs 程序 其实看到这个,自己已经有一个能跑的nodejs 程序,不用看我的了 我这里是我 ...

  7. selenium获取验证码截图

    获取验证码截图代码: 获取验证码代码: #!/user/bin/env python3 # -*- coding: utf-8 -*- import requests from selenium im ...

  8. go 环境搭建

    下载go 编辑器 https://www.jetbrains.com.cn/go/ 激活工具可以留言,我看到就回复.(保存在阿里云盘) 编辑器配置 GOPROXY=https://goproxy.cn ...

  9. Qt+OpenCascade开发笔记（二）：windows开发环境搭建（二）：Qt引入occ库，搭建基础工程模板Demo和发布Demo

    前言   Open CASCADE是由Open Cascade SAS公司开发和支持的开源软件开发平台,旨在为特定领域快速开发程序而设计.它是一个面向对象的C++类库,提供了丰富的几何造型.数据交换和 ...

  10. Jmeter函数助手-自带函数汇总

    Jmeter函数助手自带函数汇总(Jmeter官网-函数助手详解:https://jmeter.apache.org/usermanual/functions.html) BeanShell:用于简单 ...