我们时常能够看到css样式表中使用了float:left,float:right那么何时使用float?为什么需要使用float?
首先网站中的HTML标签可以整体分为两类,其中包括行元素和块元素。其最明显的区别是块元素可以独立成行(每个块元素单独占一行)、并且块元素可设置大小、如果不给块元素设计宽度,那么块元素宽度等于父级宽度(宽度的自适应),常用块元素包括div,h1-6,p,ul,li,table,tr等。
那么我们来举个例子:设置两个div(块元素,独立成行),利用css设置其背景颜色和长宽,我们会发现两个div单独占一行。
因而float的第一个作用:让块元素转变为行元素,实现两个块元素并排显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 300px;
height: 300px;
background-color: aqua;
float: right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
此时,我们在下面随便加一个div,设置背景颜色和宽高,我们会发现下面的div跑到了上面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 300px;
height: 300px;
background-color: aqua;
float: left;
}
.bottom{
width: 700px;
height: 700px;
background-color: red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>
因而我们发现了第二个问题:文档流中内容,添加浮动后直接脱离了文档流,简而言之,就是添加浮动的元素不占位置。元素不占位置其兄弟元素找不到对应元素,为了解决这个问题,我们可以给其添加clear: both;清除浮动对他的影响。即在.bottom{}内部添加clear: both;
浮动元素对于其父级元素来讲也不占位置,给父级元素添加overflow: hidden,取消子集元素对其浮动的影响,例如li填加浮动后ul便没有了高度,可以给ul添加上述css样式。其中overflow: hidden也可以用于轮播图中 ,使得超出的部分内容隐藏起来。
要注意,如果发现使用浮动没有并排,只有一个原因,那就是其宽度超出浏览器宽度,不足以让其浮动。