【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )
【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )
文章目录
一、默认的标准流布局
默认的 标准流 布局排列如下 ,
- 块级元素 各占一行 , 从上到下排列 ;
- 行内元素 多个公占一行 , 从有到右排列 ;
下面代码中 , 两个 <div> 块级元素 , 在 上下两行显示 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动特性</title>
<style>
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
.div1 {
width: 200px;
height: 200px;
background-color: orange;
}
.div2 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>展示效果 : 标准流 的 块级元素 分别占用一行显示 , 排列顺序由上到下 ;
二、浮动特性 - 脱离标准流布局、取消占用位置
将 上面的 <div> 块级元素 设置为 浮动 , 则该元素 从 标准流 布局 中脱离, 则 标准流布局 只剩下另一个 div 元素 ;
float: left;标准流布局中 , 下面的 <div> 元素显示在顶部 ;
设置为 浮动 的元素 , 会显示在 父容器 的左上角 , 这里的父容器就是浏览器 ;
浮动特性 ( 脱离标准流布局 ) : 浮动的元素 会 脱离 标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ;
浮动特性 ( 取消占用位置 ) : 脱离标准流 的 浮动元素 原来在标准流布局中的位置 , 也被取消 , 被后面的标准流元素占据 ;
网页中的 Display 显示模式有 3 种 ;
- 块级元素
- 行内元素
- 行内块元素
元素 的 浮动特性 会改变 该元素的 Display 显示模式 , 原来的 元素 不管是 块级元素 还是 行内元素 , 设置 浮动 样式后 , 其显示模式 类似于 行内块元素 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动特性</title>
<style>
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
.div1 {
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
.div2 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>显示效果 :
三、浮动特性 - 显示模式类似于行内块元素
网页中的 Display 显示模式有 3 种 ;
- 块级元素
- 行内元素
- 行内块元素
浮动特性 ( 显示模式类似于行内块元素 ) : 元素 的 浮动特性 会改变 该元素的 Display 显示模式 , 原来的 元素 不管是 块级元素 还是 行内元素 , 设置 浮动 样式后 , 其显示模式 类似于 行内块元素 ;
如果同时将 两个 div 元素设置为 浮动元素 , 则这两个浮动元素 会在一行显示 , 并且元素之间没有间隔 ;
如果 一行内显示多个 浮动元素 , 缩小浏览器 , 父容器也随之缩小 , 如果父容器装不下 浮动元素 , 会另起一行显示 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动特性</title>
<style>
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
.div1 {
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
.div2 {
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>显示效果 :
四、父容器中分别设置左右浮动效果
父容器中分别设置左右浮动效果 , 只需要设置一个 <div> 元素 左浮动 , 一个 <div> 元素 右浮动 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动特性</title>
<style>
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
.div1 {
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
.div2 {
float: right;
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>显示效果 :
