【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流 / 浮动 / 定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

一、CSS 浮动

---

CSS 浮动 相关博客 :

• 【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )
• 【CSS】浮动 ② ( 浮动语法简介 | 文字环绕效果 | 左浮动 | 右浮动 )
• 【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )
• 【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )
• 【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
• 【CSS】浮动 ⑥ ( 浮动元素与父容器盒子关系 | 代码示例 )
• 【CSS】浮动 ⑦ ( 浮动元素与兄弟容器盒子关系 | 代码示例 )

1、盒子模型位置摆放三大机制 - 普通流 / 浮动 / 定位

盒子模型位置摆放三大机制 :

• 普通流 : 默认的摆放样式 ;
  • 块级元素 摆放 : 每个 块级元素 独占一行 , 排列顺序 从上到下 ; 如 : div , p , h1 等 ;
  • 行内元素 摆放 : 多个 行内元素 在同一行显示 , 排列顺序 从左到右 , 显示到边缘 自动换行 ; 如 : span , strong , a 等 ;
• 浮动 : 盒子模型 在 普通流 基础上 覆盖显示 , 多个 块级元素 可以在同一行 相互覆盖显示 ;
• 定位 : 盒子模型 在 浏览器 指定位置 显示 ;

普通流 相当于 Android 中的 线性布局 ;
浮动 相当于 Android 中的 帧布局 或 相对布局 或 约束布局 ;
定位 相当于 Android 中的 绝对布局 ;

2、浮动语法说明

为 元素 设置了 浮动 CSS 属性 , 可以实现 :

• 元素标签 不再受 标准流 控制 ; ( 块级元素 , 行内元素 , 行内块元素 的布局方式 )
• 元素标签 可以 放置在指定的位置 , 靠左 或 靠右 ;

CSS 浮动语法 :

选择器 {
	float: 浮动属性值;
}

浮动属性值 取值 :

• none : 默认设置 , 元素没有浮动效果 ;
• left : 元素 左浮动 ;
• right : 元素 右浮动 ;

3、浮动 - 脱离标准流

默认的 标准流 布局排列如下 ,

• 块级元素 各占一行 , 从上到下排列 ;
• 行内元素 多个公占一行 , 从有到右排列 ;

浮动特性 ( 脱离标准流布局 ) : 浮动的元素 会 脱离 标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ;

浮动特性 ( 取消占用位置 ) : 脱离标准流 的 浮动元素 原来在标准流布局中的位置 , 也被取消 , 被后面的标准流元素占据 ;

网页中的 Display 显示模式有 3 种 ;

• 块级元素
• 行内元素
• 行内块元素

元素 的 浮动特性 会改变 该元素的 Display 显示模式 , 原来的 元素 不管是 块级元素 还是 行内元素 , 设置 浮动 样式后 , 其显示模式 类似于 行内块元素 ;

4、浮动元素与父容器盒子关系

在 父容器 盒子模型 中 , 将 子元素 设置为 浮动元素 , 会出现如下情况 :

• 浮动元素位置 : 浮动元素 会自动 浮动到 父容器盒子模型 的左上角 与 右上角 ,
• 浮动元素 与 父容器盒子模型边框 : 浮动元素 与 父容器 边框不重叠 , 如果没有内边距 , 浮动元素 紧贴边框 内测 ;
• 浮动元素 与 父容器盒子模型 内边距 : 浮动元素 紧贴 父容器内边距 ;

二、CSS 清除浮动

---

CSS 清除浮动 相关博客 :

• 【CSS】清除浮动 ① ( 清除浮动简介 | 清除浮动语法 | 清除浮动 - 额外标签法 )
• 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 )
• 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
• 【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )

1、清除浮动 简介

在开发页面时 , 遇到下面的情况 ,

父容器 没有设置 内容高度 样式 , 容器中的 子元素 设置了 浮动样式 , 脱离了标准流 , 高度会默认设置为 0 像素 , 这样就会导致各种显示混乱情况 ;

为了应对上述情况 , 可以 使用 " 清除浮动 " 操作 ;

清除浮动 主要作用 : 解决 父容器盒子模型 因为 子元素 被设置为 浮动元素 导致 高度默认为 0 像素 的问题 ;

清除浮动 效果 : 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ;

2、清除浮动 语法 - 额外标签法

清除浮动语法 :

CSS 选择器 {
	clear: 属性值;
}

属性值取值 :

• left : 清除左侧浮动 ;
• right : 清除右侧浮动 ;
• both : 同时清除左右两侧浮动 ;

一般在使用的时候 , 只使用 clear: both; 一种样式 ;

推荐使用 " 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 :

<div class="clear"></div>

使用 其它标签 也可以 , 如 :

<br class="clear"/>

• 优点 : 容易理解 , 使用方便 ;
• 缺点 : 添加的 额外标签 无意义 , 使得 HTML 结构混乱 ;

3、清除浮动 语法 - 父级元素设置 overflow 样式

父级元素设置 overflow 样式 语法 :

		选择器 {
			/* 清除浮动 - 父级元素设置 overflow 样式 */
			overflow: hidden;
		}

overflow 样式可设置的属性值 :

• hidden
• auto
• scroll

父级元素设置 overflow 样式 清除浮动 的优缺点 :

• 优点 : 代码简单
• 缺点 : 无法显示 溢出 的元素 , 如果 子元素 很多 , 不能自动换行 , 部分子元素会被隐藏 ;

4、额外标签法 和 overflow 样式法弊端

额外标签法 清除浮动 , 会 新增很多无意义标签 , 使得 HTML 标签结构混乱 ;

父级元素设置 overflow 属性 , 会 将溢出元素隐藏 , 或 生成滚动条 , 导致显示结果不理想 ;

这里提出第三种 清除浮动的方法 , 使用 after 伪元素清除浮动 ;

5、清除浮动 语法 - after 伪元素清除浮动

在 CSS 样式最上面 , 声明 清除浮动元素样式 ,

将选择器设置为 .clearfix:after , 其中的 :after 是伪元素 ,

		/* 清除浮动元素样式 */
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}

这种方式只有在 高版本浏览器才支持 , 低版本浏览器不支持该设置 , 为了兼容低版本浏览器 , 需要使用下面的样式 :

		/* 低版本浏览器 IE6 / IE7 清除浮动样式 */
		.clearfix {
			*zoom: 1;  
		}

如果需要 清除某个父容器中子元素的浮动样式 , 在该父容器的 class 类型上 , 添加 clearfix 类型即可 , 如 :

	<div class="father1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>

使用上述方法 , 不会改变标签的结构 , 也不会出现隐藏移除元素的问题 ;

6、清除浮动 语法 - 使用双伪元素清除浮动

为 .clearfix:before 和 .clearfix:after 并集选择器 , 设置如下样式 :

		/* 清除浮动 - 使用双伪元素清除浮动 */
		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}

为 .clearfix:after 伪类选择器设置如下样式 :

.clearfix:after 伪元素选择器 的含义是 在 该父容器盒子 的内部 , 插入新的子元素 , 该子元素设置选择器中的样式 ;

		.clearfix:after {
			clear: both;
		}

低版本浏览器 IE6 / IE7 清除浮动样式 :

		.clearfix {
			*zoom: 1;
		}

声明完上述元素后 , 在需要清除浮动元素的 父容器 中 , 声明 clearfix 类 ;

	<div class="father1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>