css浮动与清除浮动相关总结（附图解、实例）

标准流&＃xff1a;

浏览器按照各种元素标签排版布局中的默认状态&＃xff0c;也就是没有被其他排版浮动和定位相关的css属性干扰的就叫标准流

注意&＃xff1a;当元素脱离标准流以后&＃xff0c;要对位置进行调整只能用px为单位&＃xff0c;类似&＃xff1a;margin&＃xff1a;100px auto;设置100px有效&＃xff0c;auto无效

float&＃xff1a;none | left | right
默认值&＃xff1a;none

• none&＃xff1a; 设置对象不浮动
• left&＃xff1a; 设置对象浮在左边
• right&＃xff1a;设置对象浮在右边

浮动的特性&＃xff1a;

1&＃xff0c;浮动的元素脱离标准流&＃xff0c;不占原来的位置

2 , 浮动的元素会被改变显示方式

3&＃xff0c;浮动的元素以顶部对齐

4&＃xff0c;如果浮动的元素前面是标准流是元素&＃xff0c;那么这个浮动的元素只会跟在标准流的后面
除非通过人为去改变才能让他的位置发生变化

5&＃xff0c;当有包含关系时&＃xff0c;如果有子元素浮动不会跑出父盒子除非人为改变&＃xff0c;但是有一个特殊的&＃xff0c;就是为哪个边为参考则跑不出哪个边

清除浮动

有时浮动会造成父盒子没有高度&＃xff0c;而浮上来的盒子会盖住下面的盒子,清除浮动不是真正清除了浮动&＃xff0c;而是清除浮动所造成的影响.

浮动造成影响的例子&＃xff1a;
1、2、3是浮动的盒子&＃xff0c;背景是后加的盒子&＃xff0c;这样三个浮动的盒子影响了后加的盒子的正常显示

清除浮动的方式&＃xff1a;
第一种&＃xff1a;使用clear
第二种&＃xff1a;有包含关系&＃xff0c;给父元素加高度
第三种&＃xff1a;在父盒子加overflow: hidden;
第四种&＃xff1a;额外标签法
第五种&＃xff1a;伪元素清除浮动&＃xff08;这是开发中最常用的&＃xff0c;必须记住且要能手写出这段代码&＃xff09;

1. 使用clear

语法&＃xff1a;
clear&＃xff1a;none | left | right | both
默认值&＃xff1a;none
适用于&＃xff1a;块级元素
继承性&＃xff1a;无
取值&＃xff1a;

• none&＃xff1a; 允许两边都可以有浮动对象
• both&＃xff1a; 不允许有浮动对象
• left&＃xff1a; 不允许左边有浮动对象
• right&＃xff1a;不允许右边有浮动对象

关于清除浮动对于设置了清除浮动的元素&＃xff0c;它只能控制自己本身&＃xff0c;而不能控制别人

例子&＃xff1a;1、2、3都左边浮动的情况下对2进行clear&＃xff1a;left的设置
此时&＃xff1a;2左边不能有元素&＃xff0c;所以2自己下来一格

Both时&＃xff1a;不允许有浮动对象

说明&＃xff1a;2号只能控制自己本身离开1号元素&＃xff0c;三号自己跟着2号2号也没办法
解决方法&＃xff1a;对3号元素设置clear&＃xff1a;left&＃xff1b;

2. 有包含关系&＃xff0c;给父元素加高度

如图&＃xff1a;1、2、3浮动&＃xff0c;将后加的盒子挡住了&＃xff0c;此时将1、2、3嵌套进一个父盒子&＃xff0c;并且设置父盒子与1、2、3同高度

加后效果&＃xff1a;最大的盒子往下移了

3. 在父盒子加overflow: hidden;

原理&＃xff1a;触发了BFC

4. 额外标签法

如图&＃xff0c;在1、2、3标签后加一个块级&＃xff0c;且标签中加上clear&＃xff1a;both&＃xff1b;
效果&＃xff1a;

5. 伪元素清除浮动

父元素的样式

.clearfix::after{content: "."; /*加点是浏览器兼容需要*/display: block; /*没加的话高度只有”.”撑开的高度&＃xff0c;变成块级元素
的话高度就是子元素撑开的高度*/ visibility: hidden; /*隐藏“.”*/height: 0; /*使父元素的高度为子元素撑开*/line-height: 0;clear: both;}.clearfix{*zoom: 1; /*为了解决低版本的IE的清除浮动的使用*/}


效果&＃xff1a;

京东官网的实例&＃xff1a;