目录
学习目标：学习如何创建浮动特性，比如首字下沉、浮动图像，和多个列在网页布局。
什么是浮动
最初，引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。
但在后期的开发中，发现所有东西都可以浮动，浮动也被用来实现整个网站页面的布局，它使信息列得以横向排列。但目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。
float 属性
首先我们先介绍一下float属性，float属性用于定位和格式化内容，通过浮动让元素脱离原本的文档流。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧（靠上靠左浮动）
- right - 元素浮动在其容器的右侧（靠上靠右浮动）
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。
我们看以下例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.box {
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(55, 127, 252);
padding: 1em;
}
</style>
</head>
<body>
<h1>简单的浮动例子</h1>
<div class="box">Float</div>
<p>吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？</p>
<p>吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？</p>
<p>吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？</p>
</body>
</html>
通过添加float:left;margin-right:15px;
.box {
float: left;
margin-right: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(55, 127, 252);
padding: 1em;
}
我们可以看到通过在div设置向左浮动，元素吸附在其父元素的左上侧，该父元素内的其他元素则环绕其进行排列并填满了右侧的空间。 也就是浮动元素脱离了本来的文档流，浮动至其父元素边框位置。这就是我们常用的浮动布局。
那么我们增加难度，在文档右边再来添个长方体，只要再增加一个div元素，让其浮动向右，
就会出现以下效果。
对于浮动我们还要知道，设置浮动之后，元素会变成一个block元素，可以设置width与height属性。假如有很多元素设置了浮动，并且在同一个父元素之内，其排列方式为：浮动盒子向左或向右移动，直到它外边框碰到父元素的padding或者碰到另一个浮动盒子的边框为止,这就类似如水瓶里的气泡一样，不断填充。
清除浮动
假如我们添加了右边的元素之后，不想在中间填充字，这个时候我们就需要清除浮动。
通过在第一个p元素添加class如下css代码，则可以实现清除浮动。
.clearFloat{
clear:both;
}
| 值 | 意义 |
|---|---|
| left | 清除左浮动,元素为左浮动时使用 |
| righ | 清除右浮动，元素为右浮动时使用 |
| both | 清除左右两边浮动，元素为左浮动和右浮动时使用 |
上述的完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.box {
float:left;
margin-right:20px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(55, 127, 252);
padding: 1em;
}
.box2 {
float:right;
margin-right:20px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(55, 127, 252);
padding: 1em;
}
.clearFloat{
clear:both;
}
</style>
</head>
<body>
<h1>简单的浮动例子</h1>
<div class="box">Float</div>
<div class="box2">Float right</div>
<p class="clearFloat">最初，引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。
但在后期的开发中，发现所有东西都可以浮动，浮动也被用来实现整个网站页面的布局，它使信息列得以横向排列。但目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。</p>
<p> 首先我们先介绍一下float属性，float属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本。
float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。</p>
<p>CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。</p>
</body>
</html>浮动塌陷
接下来我们看一个新的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main{
width:500px;
background: #ffeeff;
}
#child1{
width: 100px;
height: 100px;
background: pink;
}
#child2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id="main">
<div id="child1">float1</div>
<div id="child2">float2</div>
</div>
</body>
</html>
我们可以看到现在id为main的盒子的高为200px，我们在两个child中添加浮动float:left
我们发现main盒子的高消失了，这个就是浮动塌陷。在实际应用中，如果浮动塌陷，可能会让与该父元素并列的元素向上排列，导致界面混乱。
解决这个问题有很多种方法，第一种：我们可以增加一个子元素，让该子元素清除浮动。
#clear{
clear:both;
} <div id="main">
<div id="child1">float1</div>
<div id="child2">float2</div>
<div id="clear"></div>
</div>第二种：我们通过增加伪元素，在父元素的后面增加行元素
#main::after{
content: "";
display: block;
clear: both;
} <div id="main">
<div id="child1">float1</div>
<div id="child2">float2</div>
</div>第三种：溢出隐藏(原理：触发了BFC块级格式化，大家可以不用了解这个原理)
.clearflow{
overflow: hidden;
} <div id="main" class="clearflow">
<div id="child1">float1</div>
<div id="child2">float2</div>
</div>以上就是关于浮动的介绍，纸上得来终觉浅，不妨做做下面的案例
测试
1.第一题我们目标将文字放在盒子1与盒子二之间 ，以下为案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background: pink;
}
.float{
width:100px;
height: 100px;
background: skyblue;
}
.float1 {
}
.float2 {
}
</style>
</head>
<body>
<div class="box">
<div class="float float1">1</div>
<div class="float float2">2</div>
<p>这里是放在1和2盒子中间的字</p>
</div>
</body>
</html>2.第二题我们目标将一段文字放在盒子的右边，将一段文字放在文字的下面，以下为案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background: pink;
}
.float{
width:100px;
height: 100px;
background: skyblue;
}
.below {
}
</style>
</head>
<body>
<div class="box">
<div class="float">Float</div>
<p>这个是第一段句子</p>
<p class="below">这个是第二段句子</p>
</div>
</body>
</html>3.第三题使div被p元素包裹，并且让元素在文字右边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Float: Task 3</title>
<link rel="stylesheet" href="../styles.css"/>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
.box {
width: 500px;
padding: 0.5em;
}
.float {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rgb(207,232,220);
padding: 1em;
float: right;
}
.box {
background-color: rebeccapurple;
padding: 10px;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="float">Float</div>
<p>将div嵌入至文字的右边</p>
</div>
</body>
</html>以上内容如有错误，请大家在评论区指正，谢谢支持，共同进步。 加油！！！
如果你感觉我写的内容对你有一定的帮助，请给我点一个 【赞】作为您对我的鼓励， 感谢! ! !
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
