4. Floating
(Case) Web page layout case
➢ Requirements: Use float to complete the layout effect in the design drawing
<!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;
}
.top {
/* 宽度高度背景色 */
height: 40px;
background-color: #333;
}
.header {
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.content {
width: 1226px;
height: 460px;
background-color: green;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: left;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
/* CSS书写顺序: 浏览器执行效率更高
1. 浮动 / display
2. 盒子模型: margin border padding 宽度高度背景色
3. 文字样式
*/
</style>
</head>
<body>
<!-- 通栏的盒子: 宽度和浏览器宽度一样大 -->
<div class="top"></div>
<div class="header">头部</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
(Case) Xiaomi Module Case
➢ Requirements: Use float to complete the layout effect in the design drawing
<!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;
}
.box {
margin: 0 auto;
width: 1226px;
height: 614px;
/* background-color: pink; */
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
ul {
/* 去掉列表的符号 */
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
/* 如果父级的宽度不够, 子级会自动换行 */
/* 第四个li和第八个li右侧间距清除 */
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</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;
}
.box {
margin: 0 auto;
width: 1226px;
height: 614px;
/* background-color: pink; */
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
ul {
/* 去掉列表的符号 */
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
/* 如果父级的宽度不够, 子级会自动换行 */
/* 第四个li和第八个li右侧间距清除 */
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
(Case) Webpage Navigation Case
➢ Requirements: Use float to complete the layout effect in the design drawing
<!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;
}
.nav {
margin: 50px auto;
width: 640px;
height: 50px;
background-color: #ffc0cb;
}
ul {
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
/* 1. 浮动 / display */
/* display: inline-block; */
display: block;
/* 2. 盒子模型 */
width: 80px;
height: 50px;
/* background-color: green; */
/* 3. 文字样式 */
text-align: center;
line-height: 50px;
color: #fff;
text-decoration: none;
}
.nav li a:hover {
background-color: green;
}
</style>
</head>
<body>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
</body>
</html>
Steps for writing web page navigation:
- Clear default margin and padding
- Find ul, remove the small dots
- Find the li tag, set the float so that li is displayed in one line
- Find the a tag, set the width and height → the a tag is an inline element by default, and the width and height cannot be set by default? ?
• Method 1: Set display : inline-block
for a label • Method 2: Set display : block for a label
• Method 3: Set float : left for a
display:inline-block;
display:block;float:left;
5. Clear floating
Goal: Be able to recognize the purpose of clearing floats and be able to use the methods of clearing floats
Learning Paths:
- Intro to Clear Float
- How to clear floats
1.1 Introduction to clearing floats
➢ Meaning: Clear the impact of floating • Impact : If the child element is floated
, the child element cannot hold the block-level parent element of the standard flow at this time . The parent element needs to have a height, so as not to affect the layout of other web page elements. The impact of floating is clear. If the child element is floating, at this time, the child element cannot stretch the block-level parent element of the standard flow. 》Doesn't occupy any space. The parent element needs to have a height, so as not to affect the layout of other web page elements
summary
➢ What is the meaning of clear float?
• The effect of clearing the float
• Effect: If the child element is floating, the child element cannot stretch the parent element.
➢ What is the purpose of clearing the float?
• Requires the parent element to have a height so that it does not affect the layout of other web elements
If the child element is floating, the child element cannot hold the block-level parent element of the standard flow at this time
<!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>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
2.1 The method of clearing the float - ① Set the height of the parent element directly
Clear floating method to directly set the height of the parent element
➢ Features:
• Advantages: simple and rude, convenient
• Disadvantages: Some layouts cannot fix the height of the parent element. Such as: news list, JD.com recommendation module
2.2 The method of clearing the float - ② Extra label method
➢ Operation:
- Add a block-level element at the end of the parent element's content
- Set clear:both for added block-level elements
➢ Features:
• Disadvantage: It will add extra tags to the page, which will complicate the HTML structure of the page
Adding a block-level element at the end of the parent element content, setting clear:both to the added block-level element
will add extra tags to the page, which will complicate the HTML structure of the page
2.3 The method of clearing floats - ③ single pseudo-element clearing method
➢ Operation: Replaced extra tags with pseudo elements
① : Basic writing
② : Supplementary writing
.clearfix::after{content:'';display:block;clear:botn;height:0;visibility:hidden;
}{ ➢ Features: • Advantage: used in the project, directly add a class to the label to clear the floating
<!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>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
.clearfix {
/* 清除左右两侧浮动的影响 */
clear: both;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
。clearfix{clear:both;}
.clearfix{clear:both;}
<!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>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
/* 单伪元素清除浮动 和 额外标签法原理是一样的 */
.clearfix::after {
content: '';
/* 伪元素添加的标签是行内, 要求块 */
display: block;
clear: both;
/* 为了兼容性 */
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
<!-- 通过css 添加标签 -->
</div>
<div class="bottom"></div>
</body>
</html>
. The clearfix::before function solves the problem of collapsed margins.
clear
2.4 The method of clearing the float - ④ Double pseudo-element clearing method
➢ Features:
• Advantages: When used in projects, directly add a class to the label to clear the floating
. When used in a project, directly add a class to the label to clear the floating
2.5 The method of clearing the float - ⑤ Set overflow : hidden to the parent element
➢ Operation:
- Set overflow : hidden directly to the parent element
➢ Features:
• Advantage: convenient