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;
}
- 保存运行我们可以看到：
问题再次得到了解决！真是激动人心。
如果这篇博客对您产生了一定的帮助，欢迎您点赞或一键三连哦！
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
