要点

1.浮动盒子会脱离文文档流，不会在占用空间。

2.非浮动元素几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响

3.非浮动元素中的文本内容会记住浮动元素的大小，并在排布时避开它,为其留出响应的空间

4.清除浮动本质：浏览器在非浮动元素的上方添加足够大的外边距，从而将元素的上边沿垂直向下移动到浮动元素的下方。

使用浮动

浮动盒子会脱离文档流，不会再占用空间。

常规流中的其他块级盒子（非浮动元素）几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响。

但是非浮动元素中的文本内容会记住浮动元素的大小，并在排布时避开它,为其留出响应的空间。

事实上，浮动就是为了在网页中实现文本环绕图片的效果而引入的一种布局模型。

清除浮动

要阻止行盒子环绕在浮动盒子外面，需要给包含行盒子的元素应用clear属性，用于指定盒子的哪个一侧不应该紧挨着浮动盒子。

浏览器会在清除浮动的元素上方添加足够大的外边距，从而将元素的上边沿垂直向下移动浮动元素的下方。

如果要给已清除浮动的元素添加外边距，除非超过浏览器自动加的值，否则不会有什么效果。

::after

BFC中浮动的处理

补充

当一个盒子中全是浮动元素时

如果包含元素太窄，无法容纳所有浮动元素水平排列，则后面的浮动元素会向下移动。

如果浮动元素的高度不同，则后面的浮动元素在向下移动时可能会卡在前面的浮动元素右侧。

float影响display

2020年7月9号补充：

由于float意味着使用块布局，它在某些情况下修改display 值的计算值：

CSS（三） - 定位模型 - float的几要素的更多相关文章

  1. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  2. CSS的六种定位模型

    定位模型 2017年6月8日 fanbright css支持6种定位模型 静态 绝对 固定 相对 浮动 相对浮动 设定位置 position:static;可以取消元素的定位设置,使之恢复为原先在常规 ...

  3. CSS三种布局模型是什么？

    在网页中,元素有三种布局模型:流动模型(Flow) 默认的.浮动模型 (Float).层模型(Layer).下面我们来看一下这三种布局模型. 三种布局模型介绍: 1.流动模型(Flow) 流动(Flo ...

  4. CSS布局(三) 布局模型

    布局模型 在网页中,元素有三种布局模型:1.流动模型(Flow) 默认的2.浮动模型 (Float)3.层模型(Layer) 1.流动模型(Flow) 流动(Flow)模型是默认的网页布局模式.也就是 ...

  5. CSS布局定位基础-盒模型和定位机制

    1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...

  6. css 深入浅出定位

    前面我们简单的了解了盒子模型,这里我们就不复习了哈.有什么不清楚的去看我的上一篇博文.其实说定位之前大家一定要先理解一个东西:文档流,那什么是文档流?和文档有关系吗?是dom树吗? 这一对的问题我们应 ...

  7. CSS视觉格式化模型

    CSS视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.这是CSS 2.1的一个基础概念.视觉格式化模型根据CSS盒模型为文档的每个元素生成0 ...

  8. CSS 中，用 float 和 position 的区别是什么？

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  9. CSS——可视化格式模型

    CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示): 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局: 换句话说,盒子模型规定了 ...

随机推荐

  1. 环境篇：呕心沥血@CDH线上调优

    环境篇:呕心沥血@线上调优 为什么出这篇文章? 近期有很多公司开始引入大数据,由于各方资源有限,并不能合理分配服务器资源,和服务器选型,小叶这里将工作中的总结出来,给新入行的小伙伴带个方向,不敢说一定 ...

  2. 不需重新编译php,安装postgresql扩展(pgsql和pdo_pgsql)

    为了不重新编译php,使用phpize工具进行追加. 1.下载phpX安装包 访问php官方下载页,找到自己对应的php版本:https://secure.php.net/downloads.php ...

  3. Centos 各个版本的下载源

    China Alibaba Cloud Computing http://mirrors.aliyun.com/centos/ China Beijing Institute of Technolog ...

  4. git-bash用法详解

    目录 1. 开启Windows的 sshd 服务 1.1. ssh 高级配置 1.1.1. 生成秘钥 1.1.2. 添加或更改密码 1.1.3. 分发公钥 1.1.4. 允许以root身份ssh连接 ...

  5. 非线性规划的Matlab 解法

    编写M 文件fun1.m 定义目标函数 function f=fun1(x); % 定义目标函数 f=sum(x.^)+; % .^2是矩阵中的每个元素都求平方.^2是求矩阵的平方或两个相同的矩阵相乘 ...

  6. TensorFlow从0到1之浅谈感知机与神经网络（18）

    最近十年以来,神经网络一直处于机器学习研究和应用的前沿.深度神经网络(DNN).迁移学习以及计算高效的图形处理器(GPU)的普及使得图像识别.语音识别甚至文本生成领域取得了重大进展. 神经网络受人类大 ...

  7. Eplan如何调用经常使用的自绘部件？

    Eplan如何调用经常使用的自绘部件?采用宏的简单应用,即可. 参考文档:https://blog.csdn.net/txwtech/article/details/90510106

  8. 【Vim命令】

    命令 操作 :set nu 显示行号  i 编辑模式  :wq  修改并退出  :%s/a/b  把所有的a替换成b                        

  9. Vue基础篇 (1) —— Vue-Router的使用

    Vue-Cli中Vue-Router的使用 一.创建vue-cli的项目 npm create myproject vue create 为vue.js 3.0构建项目的命令,2.0版本可以通过vue ...

  10. iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 3306 -j DNAT --to-destination 172.17.0.2:3306 ! -i docker0: iptables: No chain/target/match by that name

    今天使用docker运行mysql时报错, 执行命令: docker run --restart=always --name mysql5.7 -p 3306:3306 -v /data/mysql/ ...