【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )
文章目录
- 一、默认的标准流布局
- 二、浮动特性 - 脱离标准流布局、取消占用位置
- 三、浮动特性 - 显示模式类似于行内块元素
- 四、父容器中分别设置左右浮动效果
一、默认的标准流布局
默认的 标准流 布局排列如下 ,
- 块级元素 各占一行 , 从上到下排列 ;
- 行内元素 多个公占一行 , 从有到右排列 ;
下面代码中 , 两个 代码示例 : 展示效果 : 标准流 的 块级元素 分别占用一行显示 , 排列顺序由上到下 ; 将 上面的 标准流布局中 , 下面的 设置为 浮动 的元素 , 会显示在 父容器 的左上角 , 这里的父容器就是浏览器 ; 浮动特性 ( 脱离标准流布局 ) : 浮动的元素 会 脱离 标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ; 浮动特性 ( 取消占用位置 ) : 脱离标准流 的 浮动元素 原来在标准流布局中的位置 , 也被取消 , 被后面的标准流元素占据 ; 网页中的 Display 显示模式有 3 种 ; 元素 的 浮动特性 会改变 该元素的 Display 显示模式 , 原来的 元素 不管是 块级元素 还是 行内元素 , 设置 浮动 样式后 , 其显示模式 类似于 行内块元素 ; 代码示例 : 显示效果 : 网页中的 Display 显示模式有 3 种 ; 浮动特性 ( 显示模式类似于行内块元素 ) : 元素 的 浮动特性 会改变 该元素的 Display 显示模式 , 原来的 元素 不管是 块级元素 还是 行内元素 , 设置 浮动 样式后 , 其显示模式 类似于 行内块元素 ; 如果同时将 两个 div 元素设置为 浮动元素 , 则这两个浮动元素 会在一行显示 , 并且元素之间没有间隔 ; 如果 一行内显示多个 浮动元素 , 缩小浏览器 , 父容器也随之缩小 , 如果父容器装不下 浮动元素 , 会另起一行显示 ; 代码示例 : 显示效果 : 父容器中分别设置左右浮动效果 , 只需要设置一个 代码示例 : 显示效果 :
上一篇：沈园外的歌词故事是什么？
下一篇：用小鸟写一个拟人句子
二、浮动特性 - 脱离标准流布局、取消占用位置
div 元素 ;
float: left;
三、浮动特性 - 显示模式类似于行内块元素
四、父容器中分别设置左右浮动效果
相关内容