CSS之浮动/BFC/清除浮动（十二）
CSS 浮动/BFC/清除浮动
- 1，实现 CSS 布局的几种策略
- 2，正常布局流（Normal Flow)
- 2.1，正常布局流中，块级元素的排列方式
- 2.2，正常布局流中， 内联元素排版方式
- 3，浮动布局
- 3.1，浮动布局起源
- 3.2，浮动是如何工作的
- 3.3，浮动的本质和要点
- 3.4，如何产生浮动
- 4，元素浮动的特性
- 4.1，元素添加浮动后，脱离文档流
- 4.2，父宽不够，子则换行
- 4.3，浮动的顺序贴靠特性
- 4.4，元素浮动后，具有行内块级元素特性
- 4.5，浮动的元素会造成父元素高度塌陷
- 4.6，浮动对文字的影响
- 4.7，使用浮动实现网页布局
- 5，BFC 规范 和 浏览器差异
- 5.1，创建 BFC
- 5.2、BFC 的其他作用
- 5.3、浏览器差异
- 6、清除浮动
- 6.1、方法 1
- 6.2、方法 2
- 6.3、方法 3
- 6.4、方法 4
该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。
1，实现 CSS 布局的几种策略
网页布局的本质是：用 CSS 来摆放盒子，把 盒子摆放到页面对应的位置，CSS 中提供了以下几种不同的 CSS 布局策略，来实现页面的布局：
- 正常布局流
- 浮动布局
- 定位布局
- 表格布局 （
display: table;）- 响应式设计
- 弹性布局
- 网格布局
- 多列布局
以上每种布局方式，都有自己的用途，也有各自己的优缺点，相互辅助。
2，正常布局流（Normal Flow)
正常布局流 (normal flow) 是指：
- 在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。
- 正常布局流就是规定了，在默认情况下块级元素和内联元素的排版方式。
2.1，正常布局流中，块级元素的排列方式
块级盒子会从包含块的顶部开始，按序垂直排列；
同级盒子间的垂直距离会由“margin”属性决定；
相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则。
2.2，正常布局流中， 内联元素排版方式
盒子会从包含块的顶部开始，按序水平排列；
只有水平外边距（垂直方向无效）、边框和内边距会被保留；
这些盒子可以以不同的方式在垂直方向对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。
深入 CSS 布局的不同方式，点击查看详细内容
CSS之浮动/BFC/清除浮动（十二）相关推荐
- 触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
- css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
- Web前端，CSS中的浮动、清除浮动
前言 持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用 早期的作用:图文环绕 现在的作用:网页布局 • 场 ...
- css为何要清除浮动及清除浮动的方法
一:css为何要清除浮动 1.很多情况下,如果我们使用了float特效,出现margin,padding设置不能正确显示,浮动会导致父级子级之间设置了padding,导致了属性不能正常传达,导致mar ...
- CSS浮动和清除浮动
1 浮动简介 CSS浮动是指浮动元素会脱离"文档流"并向左或向右浮动,允许文本和内联元素环绕它,直到碰到父元素或者另一个浮动元素. 需要注意的是,在CSS定位中absolute绝对 ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- 进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
- CSS——CSS浮动与清除浮动
文章目录 浮动 普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮 漏 特 案例:体会浮动 现在就可以用float实现一些基本页面布局了 链接 清除浮 ...
- CSS浮动与清除浮动
CSS浮动与清除浮动( 本文以div元素布局为例.) 前言:由于CSS内容比较多,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 首先要知道,div是块级 ...
最新文章
- 进入全真互联网——音视频通信的技术变革
- mysql语句编码_使用SQL语句操作MYSQL字符编码
- 使用C＃和MSMQ开发消息处理程序
- Tips--创建jupyter notebook的虚拟环境
- 小操作_js调出outlook
- python网络安全协议_python网络安全
- 科技公司都是如何应对 COVID-19？
- CF 917A The Monster 【括号匹配】
- C++基础介绍，C++基本简介
- 科技爱好者周刊（第 199 期）：俄罗斯的 HTTPS 证书问题
- 如何使用Origin轻松绘制三点线段图
- WiFi6模块 RW6852S-50 2T2R蓝牙模块 SDIO接口 WIFI6
- FAST FW150R软件版本升级解决一些网页无法加载问题
- 常用的VBA代码参考
- 中国银行 网银 控件造成 IE8 崩溃的解决办法
- BZOJ 4173 数学 数论
- 迭代最近邻ICP算法
- CocosCreator 游戏小地图/地图雷达
- 工具分享：pycharm-2019.1_windows正版最新（附下载链接）
- 在单元格中进行Excel换行的两种方法和取消换行符的方法
热门文章