CSS浮动(FLOAT)属性的应用及技巧
什么是浮动?
- 所谓的CSS 的 Float(浮动),有两种属性值,第一种是左浮动:
float;left;
。该属性会使元素向左移动,周围的元素则会根据此元素的位置散布在其周围。 - 另一种是右浮动:
float:right
;会使元素向左或向右移动,该属性会使元素向左移动,周围的元素则会根据此元素的位置散布在其周围。
如何应用呢?
- 我们先新建一个html的基本框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 在body标签的后面加入以下代码,这是网页内容的骨架:
<ul class="d">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
<li>项目五</li>
<li>项目六</li>
</ul>
- 在title标签的后面加入以下代码,这是用来包裹css样式代码的内嵌式样式表:
<style>
.d li{list-style-type: none;}
</style>
其中d前面的.代表的是类选择器,list-style-type: none;
则是为了隐藏列表前面的点。
- 现在我们来保存并运行这个网页,可以看到如下效果:
可以看到,列表成竖行排列,但在有些时候我们也会需要它横向排列,这次就用到我们此次所学的知识:浮动。
- 现在我们将这个浮动代码
float:left;
放到代码list-style-type: none;
的后面再刷新浏览器就可以看到如图所示的列表项横向排列,因为列表的每一项都应用了左浮动的样式。
浮动样式分两种,一种是float:left;
左浮动,就是我们上面所讲的。另一种是float:right;
右浮动,这种浮动方式会使整个ul都靠在整个网页的右边。
如何清除浮动
- 我们首先需要准备如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d2{
width: 100px;
height: 100px;
float: left;
background-color: chartreuse;
/* border: 2px solid red; */
}
.d1{
width: 500px;
height: auto;
background-color: red;
}
</style>
</head>
<body>
<div class="d1">
大div
<div class="d2">
可以看到此时绿色div已经脱离了红色div
</div>
</div>
</body>
</html>
此时我们保存运行就会出现以下的情况:
- 我们找到了问题:我们明明没有给红色父类div设置高度,可绿色子类div却没能将红色div撑起来,这是为什么呢?
- 原因是这样的:当我们针对某一元素进行浮动时,它就会脱离原文档流的限制重新进行排版,造成已经布局好的页面被打乱。
- 那么我们该如何解决(清除浮动)呢:方法一、将被浮动的元素加上overflow: auto;这个样式的作用是:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
现在我们保存网页,可以看到如下的效果:
此时问题得到解决。
- 方法二:那么只有这一种清除浮动的方法吗,答案是否定的,我们还可以利用在浮动元素后使用一个空元素如
<div class="clear"></div>
并在样式表里加入样式:
.clear {
clear: both;
}
- 保存运行我们可以看到:
问题再次得到了解决!真是激动人心。
如果这篇博客对您产生了一定的帮助,欢迎您点赞或一键三连哦!