[华为云WEB前端全栈成长计划]十、CSS浮动
【摘要】 前面我们介绍了CSS的盒模型，这在开发中经常使用。现在我们来学习CSS的浮动，来完成更好的布局。
前面我们介绍了CSS的盒模型，这在开发中经常使用。现在我们来学习CSS的浮动，来完成更好的布局。
浮动
如果还不明白可以看一下菜鸟教程的解释，其中有图片进行说明：https://www.w3school.com.cn/css/css_positioning_floating.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
.box{
border: 1px solid #000000;
}
.swim{
width: 100px;
height: 100px;
background: yellow;
/*float: left;*/
}
</style>
</head>
<body>
<div class="box">一天到晚游泳的鱼
<div class="swim">我就是我</div>
</div>
</body>
</html>
效果：
去掉注释后的效果：
清除浮动
先来看看浮动的效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
.box{
border: 1px solid #000000;
height: 200px;
}
.left{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
.right{
width: 100px;
height: 100px;
background: red;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left">我就是我</div>
<div class="right">你就是你</div>
</div>
</body>
</html>
效果：
我们可以看到当父div中没有其他内容，两个子div设置浮动后，父div的样式变成了一条直线。它的高度丢失了，这也成为元素塌陷。
为了解决这个问题，我们要清除浮动。
方法一：
设置clear属性
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
.box{
border: 1px solid #000000;
}
.left{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
.right{
width: 100px;
height: 100px;
background: red;
float: right;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="left">我就是我</div>
<div class="right">你就是你</div>
<div class="clear"></div>
</div>
</body>
</html>
注意clear一定要放在最后，当去掉右侧浮动时(注释或者删除掉 你就是你 这个元素后)，也可以将clear的指改为left清除浮动，也可以正常显示。
方法二：
设置overflow属性。
这个属性在设置文本是最长用，比如文本框太小显示不完所有的内容，设置overflow属性可以生成滚动条，来显示。
在清除浮动的用法，我们在父元素中设置overflow : hidden即可。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
.box{
border: 1px solid #000000;
overflow: hidden;
}
.left{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
.right{
width: 100px;
height: 100px;
background: red;
float: right;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="left">我就是我</div>
<div class="right">你就是你</div>
<!--<div class="clear"></div>-->
</div>
</body>
</html>
效果和设置clear属性相同。
常用技巧
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
.box{
border: 1px solid #000000;
/*overflow: hidden;*/
}
.left{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
.right{
width: 100px;
height: 100px;
background: red;
float: right;
}
.clear{
clear: both;
}
.clearfix:after{
content: "";
clear: both;
display: block;
height: 0px;
font-size: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left">我就是我</div>
<div class="right">你就是你</div>
<!--<div class="clear"></div>-->
</div>
</body>
</html>
注意：clear的作用一定是块级元素。伪类选择器的作用类似在内部末尾加入了块级元素，设置clear属性。
实战
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.container{
border: 1px solid #000000;
width: 800px;
margin: 0px auto;
overflow: hidden;
}
.center{
float: left;
background-color: yellow;
width: 100%;
}
.left{
float: left;
background-color: red;
width: 200px;
margin-left: -100%;
}
.right{
float: left;
background-color: blue;
width: 200px;
margin-left: -200px;
}
.content{
margin:0 200px ;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<div class="content">华为</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
效果：
关于负margin：
如果不设置是这样的。
我们可以理解为要让红色块出现在效果的位置，所以，他需要设置为左边margin：margin-left：为-800px或者为-100%。移除完毕后，效果如下：
我们需要将蓝色移动到效果图位置，所以设置margin-left为-200px；
注意，设置为-100%，会随着父元素的width改变而改变，如果写为固定的-800px，就不会有这样的效果。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）