目录
2.1清除浮动语法:clear：none | left | right | both；
1CSS Float（浮动）简介
- 普通流
- CSS Float（浮动）的基础知识
- 使用浮动后产生的问题
- 清除浮动（闭合浮动）常用方法
- Float案例演示
1.1CSS定位机制
1.2CSS Float（浮动）的基础知识
- 会使元素向左或向右移动，只能左右，不能上下。
- 浮动元素碰到包含框或另一个浮动框，浮动停止。
- 浮动元素之后的元素将围绕它，之前的不受影响。
- 浮动元素会脱离标准流。
1.3浮动的基本语法
- float:left 靠左浮动
- float:right 靠右浮动
- float:none 不适用浮动
1.4 使用浮动后产生的问题
- 元素使用浮动后会脱离普通流，出现“高度缺陷”
- 浮动溢出
- 清除浮动
2.清除浮动
2.1清除浮动语法:clear：none | left | right | both；
2.2清除浮动常用两种方法
- 在浮动元素后使用一个空元素----
- 给浮动元素的容器添加 overflow:hidden；
- 使用CSS3的:after伪元素
- 清除浮动其他方法
3.代码示例
3.1浮动基本流和基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*浮动基本流*/
div{
width:300px;
height:200px;
background:blue;}
span{
width:300px;
height:200px;
background:red;}
</style>
/*浮动基本语法*/
<style type="text/css">
.container{
width:800px;
height:600px;
border:2px solid #333;
}
.container img{
float:left; /*浮动基本语法*/
float:right; /*浮动基本语法*/
float:none; /*浮动基本语法*/
}
</style>
</head>
<body>
<div>这个是块级元素1</div>
<div>这个是块级元素2</div>
<span>这个是行内元素1</span>
<span>这个是行内元素2</span>
<div class="container">
<img src="./img/1.jpg">
<p>前言 目前Mock技术已经比较成熟，在日常的工作中Mock也可以给我们带来很大的遍历，本篇文章将会使用Moco框架，一步一步搭建一套Mock Server，使得接口的自动化测试更加的提前，也能够使得前后端分离。 共识与痛点 目前，在软件行业内，大家已经达成的共识就是，测试的工作应该从需求阶段就开始，但在实际工作落地的时候，我们也仅仅能够根据需求写一些测试用例。 在开发测试代码的过程中，调试就面临着...前言 目前Mock技术已经比较成熟，在日常的工作中Mock也可以给我们带来很大的遍历，本篇文章将会使用Moco框架，一步一步搭建一套Mock Server，使得接口的自动化测试更加的提前，也能够使得前后端分离。 共识与痛点 目前，在软件行业内，大家已经达成的共识就是，测试的工作应该从需求阶段就开始，但在实际工作落地的时候，我们也仅仅能够根据需求写一些测试用例。 在开发测试代码的过程中，调试就面临着...前言 目前Mock技术已经比较成熟，在日常的工作中Mock也可以给我们带来很大的遍历，本篇文章将会使用Moco框架，一步一步搭建一套Mock Server，使得接口的自动化测试更加的提前，也能够使得前后端分离。 </p>
</div>
</body>
</html>3.2清除浮动方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1{background-color: red;}
.div2{
background-color: yellowgreen;
float: left;
width: 200px;
height: 200px;
}
.div3{
background-color: blue;
float: left;
width: 220px;
height: 220px;
}
.div4{
background-color: black;
/*float: left;*/
width: 240px;
height: 240px;
/*clear: both; !*方法1*!*/
}
.clearDiv{clear: both;} /*方法2*/
.clearDiv:after{ /*方法3*/
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearDiv{zoom: 1} /*进入IE*/
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
<div class="clearDiv"></div> <!--方法2-->
<div class="div4"></div>
</div>
</body>
</html>3.3实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav_demo</title>
<style>
*{
margin:0; /*去掉所有外边距和内填充*/
padding:0;
}
ul{
list-style:none; /*ul的.*/
}
a{
text-decoration:none; /*清除a标签下划线*/
}
.clearfix:after{
content:'.';
height:0;
visibility: hidden;
display:block;
clear:both;
}
.clearfix{
zoom:1;
}
.container{
width:1200px;
margin:0 auto;
}
.header{
width:1200px;
background:#ccc;
overflow:hidden;
zoom:1;
}
.header .logo{
width:200px;
height:80px;
float:left;
margin:0 40px;
}
.header .nav{
padding-right:40px;
float:right;
overflow:hidden;
zoom:1;
}
.header .nav li{
height:80px;
float:left;
margin-right:20px;
}
.header .nav li a{
padding:0 20px;
height:80px;
line-height:80px;
display:block;
font-family: '微软雅黑';
font-size:16px;
color:#333;
}
.header .nav li a:hover{
color:#fff;
}
.main, .footer{
font-size:22px;
color:#fff;
}
.main{
width:1200px;
overflow: hidden;
zoom:1;
}
.main .con{
width:1000px;
height:500px;
background:blue;
float:left;
}
.main .sidebar{
width:200px;
height:500px;
background:orange;
float:left;
}
.footer{
width:1200px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="header">
<div class="logo">
<a href="#"><img src="./img/logo.png"></a>
</div>
<ul class="nav">
<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>
<div class="main">
<div class="con">content</div>
<div class="sidebar">sidebar</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
