CSS入门八之浮动
2020-12-12 本文已影响0人
码农修行之路
浮动
：能够让多个元素排列在同一行 并且可以给这些元素设置宽高
- 我们之前学过 行内元素可以让多个元素在同一行 块元素可以设置宽高
怎样让块元素具备行内元素的特点（多个元素放置在同一行） 那么只能让这些元素脱离标准的文档流
- 浮动元素 float 其属性值：left right
浮动元素的特点：
- 脱离现有的标准的文档流 不占用空间
- 浮动的层级要比标准文档流中元素的层级高(在其它非浮动元素上面 覆盖其它元素)
- 浮动元素可以左右移动
- 浮动元素遇到父元素的边框边界停止浮动 box1 float:right; 会发现盒子一到body最右边边框位置停止
- 浮动元素遇到上一个附送元素也会停止浮动 box2 float:right; 发现盒子二移动到盒子一左边框的位置停止
- 浮动元素不包括在父元素里面 box3 float:right; 发现盒子三浮动后 body边框不能包含这几个盒子了
- 行内元素进行浮动后 就会变成块级元素 三个盒子设置浮动属性 这些元素就变成块级元素 可以在同一行
- 浮动元素 可以让块级元素设置宽高
一般浮动元素会影响整体的页面排版 怎样清除浮动 方法有三：
- 给浮动元素的父元素设置固定高度 可以清除浮动
- 在最后一个设置浮动属性的元素 下面添加一个空白div标签 并给这个空白标签设置 claer:both;（不能使用在列表里面 因为列表里面只能包含<li>标签）
- overflow:hidden 清除列表浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.b {
border: 1px solid #000;
}
.box1 {
width: 100px;
height: 100px;
border: 2px solid #f00;
float: left;
}
.box2 {
width: 100px;
height: 100px;
border: 2px solid #0f0;
margin-left: 20px;
float: left;
}
.box3 {
width: 100px;
height: 100px;
border: 2px solid #00f;
float: left;
}
.box {
/* 给浮动元素的父元素设置固定高度 可以清除浮动 */
/*height: 120px;*/
border: 1px solid #333;
}
.s1 {
width: 100px;
height: 100px;
background-color: #444;
border: 1px solid #aaa;
float: left;
}
.s2 {
width: 100px;
height: 100px;
background-color: #888;
border: 1px solid #aaa;
float: left;
}
.s3 {
width: 100px;
height: 100px;
background-color: #bbb;
border: 1px solid #aaa;
float: right;
}
/* 使用标签 clear 来清除浮动 标签属性 left right both(常用) */
.clear_float {
clear: both;
}
ul {
list-style: none;
}
ul li {
float: left;
}
</style>
</head>
<body class="b">
<!-- <div class="box1">盒子一</div>
<div class="box2">盒子二</div>
<div class="box3">盒子三</div> -->
<div class="box">
<span class="s1">块元素一</span>
<span class="s2">块元素二</span>
<span class="s3">块元素三</span>
<!-- 在最后一个设置浮动属性的元素 下面添加一个空白div标签 并给这个空白标签设置 claer:both; 属性来清除浮动 -->
<div class="clear_float"></div>
</div>
<div>测试盒子</div>
<!-- overflow:hidden 清除列表浮动 -->
<ul style="overflow: hidden;">
<li>菜单选项一</li>
<li>菜单选项二</li>
<li>菜单选项三</li>
<li>菜单选项四</li>
<li>菜单选项五</li>
<li>菜单选项六</li>
</ul>
</body>
</html>
