浮动以及浮动的用处
发布网友
发布时间：2024-10-04 12:27
共1个回答
热心网友
时间：2024-10-08 20:38
本文的学习目标是
了解什么是浮动
了解浮动的用处
了解浮动所来带的影响
了解如何解决浮动所来带的影响
标准文档流在介绍浮动之前，我们需要先了解一下什么叫做标准文档流。
标准文档流就是元素在默认的排版布局中，是从左往右，从上往下排版的。前面的元素的大小或者位置发生变化，会影响到后面元素的排版。没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。HTML就是标准文档流的文件
标准文档流中的空白折叠在元素的内容中或者两个元素之间无论写多少个空格（或者换行），最终显示在浏览器上的都只有一个空格
标准文档流的底部对齐如果有文字，图片在同一行中，他们的高度不统一，最终显示在浏览器页面上的是以底部对齐的
自动换行，一行写不满，换行写如果有文字和元素在一行中放不下，会自动换行
块级元素和行内元素通常我们的元素会分成块级元素和行内元素和行内块元素，他们之间是可以使用display相互转化的
块级元素可以对一个元素使用display:block属性将它转换成块级元素
独占一整行，不能跟其它的元素并排
可以设置宽和高（如果没有设置宽度的话，默认是跟父级宽度一样宽）
可以设置margin和padding
常见的块级元素有，<div></div>、<h1~h6></h1~h6>、<p></p>等
行内元素可以对一个元素使用display:inline属性将它转换成行内元素
可以和其它元素并排
不可以设宽和高（设置宽和高无效），默认的宽度就是内容的宽度
设置margin、padding只能设置左右
常见的行内元素有<span></span><i></i><em></em>等
行内块元素可以对一个元素使用display:inline-block属性将它转换成行内块元素
可以和其它元素并排
可以正常设置宽、高、margin、padding，默认的宽度是内容的宽度
常见的行内块元素有<a></a><input/><img/>等
了解完标准文档流以后，我们来看一个需求（将三个div并排）虽然我们给div设置了宽度和高度，但是由于div是块级元素，所以div还是分成了三行显示
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><divclass="box1">1</div><divclass="box2">2</div><divclass="box3">3</div>这个时候我们可以通过将div转换成行内块元素来让他们显示在一行中
但是你会发现，相邻的div之间有多出来的空隙，这是因为两个相邻的元素之间有换行，换行会被转化成一个空格显示在页面上。只要将div写在同一行或者将换行注释掉就可以了
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>但是这么写会很麻烦，如果我们现在就要并排、并且就要设置宽高应该要怎么做?我们应该让元素脱离标准文档流
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
浮动（float）浮动在以前是很常见的一个布局属性，他原本的作用是让文字来围绕图片的。有三个属性值
float:
none默认值，没有浮动
left向左边浮动
right向右边浮动
没有设置浮动时跟图片的效果是这样的
设置了浮动以后
我们可以看出来文字有了环绕图片的效果。
但是浮动的作用不止是这样，浮动还可以拿来布局。
设置成浮动后，元素的特点当我们将一个元素设置成了浮动以后它会
脱离标准文档流
变成行内块元素
设置了浮动以后会按照设置浮动的方向靠，直到碰到了另一个浮动元素，或者碰到了父级元素的边缘（准确点来说应该是父级元素不包括边框和padding的边缘）。当父级元素的一行宽度不够容纳浮动的子元素时，会换行显示
浮动元素脱离标准文档流浮动元素脱离标准文档流的意思就是，它不会占据原本正常显示的位置。更像是“浮”在了其它元素的上面。
<style>.box1{float:left;width:200px;height:200px;background-color:pink;}.box2{width:300px;height:300px;background-color:purple;}.box3{width:500px;height:400px;background-color:red;}</style><divclass="box1">1</div><divclass="box2">2</div><divclass="box3">3</div>我们可以看到，没有设置浮动的box2和box3是正常显示在页面上的。设置了浮动的box1脱离了文档流一样，不会占据位置。“浮”在了box2上
变成行内块元素设置了浮动的元素会变成行内块元素
span{float:left;width:200px;height:200px;background-color:pink;}<span>123</span>通过上面的代码我们可以发现，span元素可以正常的设置宽度和高度了，有了行内块元素的特性
设置了浮动以后会按照设置浮动的方向靠div{width:200px;height:200px;}.box1{float:left;background-color:pink;}.box2{float:right;background-color:purple;}<divclass="box1">1</div><divclass="box2">2</div>我们可以看到，当我们把box1设置成左浮动的时候，往左边浮动了，box2设置成右浮动就变成了右浮动了
浮动元素碰到另一个浮动元素会停下来浮动元素碰到另一个浮动元素会停下来，这可以让我们把三个div并排显示
div{width:200px;height:200px;float:left;}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}<divclass="box1">1</div><divclass="box2">2</div><divclass="box3">3</div>我们给三个div都设置了左浮动，然后发现了三个div紧紧贴在了一起。这是因为浮动元素碰到了另一个浮动元素会停下来。并且这三个div之间也没有空隙
浮动元素不会超出父级元素的边缘<style>.box{width:300px;height:300px;background-color:purple;margin:50px0050px;/*border:10pxsolidred;*//*padding-left:20px;*/}.son{float:left;width:100px;height:100px;background-color:pink;}</style><divclass="box"><divclass="son"></div></div>我们通过代码发现，我们让父级元素通过margin稍微移动一些。这个时候给子元素设置向左浮动。子元素最多只能碰到父级元素的边缘。并且这个边缘不包括父级元素的边框和padding值。
父级元素的一行宽度不够容纳浮动的子元素时，会换行显示<style>.box{width:700px;height:300px;border:1pxsolidred;}.boxdiv{float:left;width:200px;height:100px;}.box1{background-color:pink;}.box2{background-color:red;}.box3{background-color:purple;}</style><divclass="box"><divclass="box1">1</div><divclass="box2">2</div><divclass="box3">3</div></div>上面的代码中，当所有子元素的宽度没有超过父元素的时候，是正常显示的
当我们增加子元素的宽度时，或者给子元素增加外边距。这个时候如果所有子元素的大小加上边距大于父级元素宽度的时候，会因为一行宽度容纳不下子元素而换行
我们给上面的代码中，所有的子元素增加右边距margin-right:50px，这个时候你会发现，第三个子元素掉下来了。
浮动带来的负面影响浮动是有负面影响的，会造成父元素的高度塌陷
浮动会造成父级元素的高度塌陷当父级元素没有设置高度的时候。在正常情况下，父级元素的高度是由子元素撑开的
<style>.box{width:300px;background-color:purple;}.son{width:100px;height:100px;background-color:pink;}</style><divclass="box"><divclass="son"></div></div>通过上面的代码我们可以发现，只给父级元素设置宽度。没有设置高度的话，父级元素的高度由子元素撑开
当子元素为浮动时，父级元素不会被子元素的高度撑开，这就是我们俗称的高度塌陷
<style>.box{width:300px;background-color:purple;}.son{float:left;width:100px;height:100px;background-color:pink;}</style><divclass="box"><divclass="son"></div></div>解决父元素的高度塌陷在了解如何解决父元素的高度塌陷之前。我们需要先了解一下清除浮动
清除浮动（clear属性）clear属性是用来清除浮动的，有三个属性值
属性值作用left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。inherit规定应该从父元素继承clear属性的值这是官网上对清除浮动的解释
clear属性定义了元素的哪边上不允许出现浮动元素。
但我其实觉得这句话是不够准确的。我们先按照正常思维来理解一下这句话
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>0上面的代码有两个向左浮动的元素。这个时候我们如果按正常来想。我们给box1增加一个clear:right,让他的右边不允许出现浮动元素。
我们可能觉得效果是这样的
但其实效果是这样的
为什么我们所理解的clear:right在这里没有效果？
我们再看一个例子
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>1我们这个时候有三个盒子，我们想给box2设置属性，clear:both;让他的两边不可以出现浮动元素。我们想要的效果可能是这样的
但其实效果是这个样的。你会发现两边不能出现浮动元素只有左边生效了
其实我们应该这么的理解这个属性。这个属性其实是作用在自身的。而不是影响别人的，你没办法通过这个属性来把其他浮动元素赶跑，你把这个属性设置在自身上是为了让自己远离浮动元素。或者应该说清除前一个浮动元素对自己的影响
所以第一个例子应该这么写
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>2我们没办法通过在box1中设置clear:right;来把box2赶走，我们应该在box2中设置clear:left;来清除box1对自己的影响。这样就能达到想要的效果。
在右浮动中也是同理。我们应该给box2增加一个clear:right;来清除box1浮动的影响
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>3总结一句话就是，clear属性是作用在自身上的。用来清除浮动的影响。并且它不仅用来清除前面一个元素浮动所造成的影响。并且这种清除浮动的影响也可以用来清除前一个元素被它的子元素的浮动所造成的影响。
这个属性通常是这么用的
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>4由于box1的浮动导致box1脱离了文档流,所以box1不会占据位置，所以box2往上移动了
这个时候我们可以给box2增加一个clear:left;,来清除box1的浮动所造成的影响。
这种方式也可以清除box1因为它的子元素浮动而造成的高度塌陷这种影响
clear清除浮动解决高度塌陷<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>5我们可以看到在上面的代码中，box1由于它的子元素浮动造成自己的高度塌陷。这个时候我们可以在box1的同级元素box2中使用clear属性，来清除box1的子元素浮动对box1造成的高度塌陷影响
给box2加了clear:left;
在父级元素中解决高度塌陷方法给父元素设置固定高度结局高度塌陷给父元素设置固定高度。此方法适用于子元素高度已知并且固定的情况但在实际开发过程中，高度都是被内容撑开
开启父元素的BFC模式当开启了BFC后，元素会变成一个独立的布局区域，会有以下特点
父元素的垂直外边距不会和子元素重叠（不会外边距合并）
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素（可以解决高度塌陷）
如何开启BFC
设置父级元素浮动（不推荐，这样父级元素的父级元素又会被浮动影响。并且父级元素会从块级元素变成行内块元素）
设置父级元素为display:inline-block;（不推荐，会丢失父元素的宽度）
将父级元素的overflow设置为一个非visible的值可以使用（也不推荐，如果设置成属性值为hidden，那超出的子元素会被截取掉）
设置父级元素为绝对定位
在子元素中解决父元素高度塌陷在父元素的最后增加一个空div并清除浮动(不推荐)<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>6运行上面的代码后我们发现，在父元素的最后增加一个空div，然后清除它前面的子元素浮动造成的影响。这样就可以解决父元素的高度塌陷问题。但是我们不推荐这种方式。会让页面上多出很多没有必要的空标签
使用伪类清除浮动使用伪类清除浮动本质上跟使用空div是一样的。只不过将空div替换成了伪类。这样页面上不会多出来很多没有用的空div。这也是我们所推荐的方式
<style>div{width:200px;height:200px;/*display:inline-block;*/}.box1{background-color:pink;}.box2{background-color:purple;}.box3{background-color:red;}</style><!--写在同一行或者将换行注释--><divclass="box1">1</div><divclass="box2">2</div><!--将换行注释--><divclass="box3">3</div>7首先我们给box增加一个after伪元素。将它设置成display:block;,然后将conten设置成".",要一个.的原因是为了兼容性问题，低版本的i
