带你了解CSS浮动的魅力"/>
带你了解CSS浮动的魅力
目录
一、什么是浮动？
二、浮动产生的影响（问题）
三、清除浮动--解决浮动带来的问题
1、后续标准流被覆盖
解决方案：给box2 添加如下代码：
2、父级盒子高度塌陷问题
解决方法
3、垂直外边距重合
解决方法如下：
总结
今天给大家分享浮动会带来的一些都会遇到的问题。
一、什么是浮动？
1、含义：浮动属性是float用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
2、作用：浮动可以改变元素标签默认的排列方式，可以让多个块级标签一行内排列显示。可以利用浮动完成标准流没办法完成的布局效果。
3、浮动的特点
1.元素一旦浮动，脱离文档流(不占页面空间，后面未浮动元素会上前补位)
2.浮动元素会在当前行，停靠在父元素的左/右边，或者停靠在其他已浮动元素的边缘
3.当父元素横向显示不下所有浮动元素时，最后显示不下的，会自动换行
4.浮动用于解决，多个块级元素在同一行显示的问题
二、浮动产生的影响（问题）
（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素；若没有给父元素设置高度，那么父元素就不会在显示屏上显示。
（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置
（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示
三、清除浮动--解决浮动带来的问题
1、后续标准流被覆盖
由于元素浮动之后，会脱离文档流，不占位置，会让后续不浮动的元素上前补位.浮动的元素就会遮盖住后续标准流。
如果后续元素不想上前补位，需要对此元素设置清除浮动 clear:
取值：1.left 清除左浮动对我的影响
2.right 清除右浮动对我的影响
3.both 清除左右浮动对我的影响
4.none 不清除影响
给box1添加浮动后，box1脱离文档流，box2会向上移动到box1的位置，导致布局紊乱，代码如下：
<style type="text/css">.box1{width:200px;height:200px;float:left;background:pink;}.box2{width:500px;height:500px;background:plum;}</style><body><div class="box1">box1</div><div class="box2">box2</div>
</body>
解决方案：给box2 添加如下代码：
clear:both;2、父级盒子高度塌陷问题
父元素不写高，靠子元素撑起高度,.所有子元素都浮动，那么所有子元素都脱离文档流，父元素认为自己内部没有元素了，所以父元素就没有高度了。父级盒子里可以装很多浮动盒子，若指定父盒子高度，则溢出的盒子会另起一行。
正常情况下，当父元素不设置宽高时，父元素的高度由子元素撑开，代码如下：
<body><div class="box1"><div class="box2"></div></div>
</body>.box1{border:10px solid pink;
}
.box2{width:200px;height:200px;background:plum;
}但是，当给子元素设置浮动后，就造成了父元素高度塌陷，代码如下：
<style type="text/css">.box1{border:10px solid pink;}.box2{width:200px;height:200px;background:plum;float:left;}</style>解决方法
1、额外标签法：给box1增加一个子元素（必须加在最后），并给这个子元素设置 clear: both
<body><div class="box1"><div class="box2"></div><div class="box3"></div></div>
</body>.box3{clear:both;}2、给父元素box1加 overflow:hidden
3、给父元素加 float
4、最好的解决方案是：给父元素添加如下自定义类 .clearfix
.clearfix:after{content:"";display:table; }.clearfix:before，
.clearfix:after{content:"";display:block;clear:both;}3、垂直外边距重合
第一种情况：
垂直排列的两个元素，上面元素的下外边距与下面元素的上外边距同时设置时， 会取联两者较大的值而不是取两者之和。
第二种情况：
父子元素垂直外边距相邻时，给子元素设置外边距，会同时导致父元素也同样拥有外边距的值，即
父元素与子元素同时移动。
解决方法如下：
1、给子元素设置 border-top （此方法会导致元素多设置border ） ；
2、给父元素设置 padding-top （此方法需要重新计算父元素的高度 ）；
3、给父元素设置 overflow:hidden（此方法在需要实现溢出功能时，将不能使用）
4、最好的解决方案是：给父元素添加如下自定义类 .clearfix
.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}总结
以上就是今天要讲的内容，这些CSS的浮动内容就是我想为大家讲解了我认为比较重要的点。希望大家也能学到有用的内容。谢谢！
更多推荐
带你了解CSS浮动的魅力
发布评论