- 能够说出浮动的作用
- 能够说出浮动元素的特点
- 能够说出常见的清除浮动方法
- 能够使用浮动完成小米模块案例
- 能够使用浮动完成网页导航案例
浮动的作用
早期:图文环绕
现在的作用:用于页面布局,让垂直的盒子变成水平布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
/* 左浮动 */
float: left;
margin-right: 20px;
}
.left {
/* 左浮动 */
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.right {
/* 右浮动 */
float: right;
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 1、图文环绕 -->
<!-- <img src="./images/1.jpg" alt=""> -->
前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。 -->
<!-- 2、网页布局 → 水平布局 -->
<div class="left">左浮动</div>
<div class="right">右浮动</div>
</body>
</html>
浮动的特点
1.浮动元素会脱离标准流,浮到空中
2.浮动的元素比标准流高半个等级,可以覆盖标准流中的元素
3.浮动找浮动
小米官网
.box {
width: 1226px;
height: 615px;
background-color: pink;
}
.left {
float: left;
height: 615px;
width: 234px;
}
.right {
float: right;
width: 978px;
height: 615px;
}
<div class="box">
<div class="left"></div>
<ul class="right"></ul>
</div>
4.浮动元素会受到上边界的影响
5.浮动元素有类似行列块的效果–
- 可以设置宽高
- 一行显示多个
- 注意:浮动元素不能通过text-align:center 或者margin:0 auto;,让浮动元素本身水平居中
小米布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去除掉标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
height: 614px;
/* background-color: pink; */
margin: 100px auto;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: yellow; */
}
.item {
float: left;
width: 234px;
height: 300px;
background-color: #87ceeb;
margin-right: 14px;
margin-bottom: 14px;
}
/* 找到的是 第 4 和第 8个 4倍数 4n */
.item:nth-child(4n) {
/* background-color: red; */
margin-right: 0;
}
/* 找到从第5个开始往后的所有个子元素 */
.item:nth-child(n+5) {
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- 布局流程:从上往下,从外往内 -->
<div class="box">
<div class="left"></div>
<div class="right">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
网页导航显示案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1、找到ul,去除小圆点 */
ul {
list-style: none;
}
/* 2.块元素水平排布 */
ul li {
float: left;
/* width: 80px;
height: 50px; */
text-align: center;
}
/* 3、找到a标签,设置宽高 */
ul li a {
float: left;
width: 80px;
height: 50px;
background-color: #ffc0cb;
line-height: 50px;
font-style: 16px;
text-decoration: none;
color: #fff5eb;
}
ul li a:hover {
background-color: #008000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
</body>
</html>
清除浮动
含义:q清除浮动带来的影响
- 影响:如果子元素浮动了,此时子元素不能撑开标准流的块级元素
- 原因:子元素浮动脱标
- 目的:需要父元素有高度,从而不影响页面布局
清除浮动的方法:
1.在父元素内容的最后添加一个块级元素;给添加的块级元素设置clear:both
2.单伪元素清除法
.clearfix::after {
content:'';
display:block;
clear:both;
}
3. 双伪元素清除法
(还可以解决margin塌陷问题)
.clearfix::after,
.clearfix::before {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
4.直接给父元素设置 overflow:hidden
(还可以解决margin塌陷问题)