css的浮动以及如何清除浮动

Posted 2023-04-26

CSS清除浮动的3种方法，参考：http://www.apiref.com/css-zh/experience/skill.htm#no9

方法1：

#testclear:both;

#test为浮动元素的下一个兄弟元素

方法2：

#testdisplay:block;zoom:1;overflow:hidden;

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3：

#testzoom:1;#test:afterdisplay:block;clear:both;visibility:hidden;height:0;content:\'\';

#test为浮动元素的父元素

参考技术A 浮动分为左浮动 float:left; 和右浮动 float:right;
标签添加浮动之后会对后面的元素及父级元素产生影响如父级高度塌陷，为了清除浮动影响主要有三种方式：
第一个是父级添加overflow属性；
第二个是在浮动标签后添加一个空标签，该空标签添加clear属性清除浮动；
第三个利用伪元素after，添加clear属性，原理和插入空标签类似；
望采纳，谢谢

css清除浮动的原理

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解,

如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三.如何清除浮动(重点)阅读

一.什么是浮动
首先我们需要知道定位 
元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 
1、普通流定位 static（默认方式） 
　　普通流定位，又称为文档流定位，是页面元素的默认定位方式 
　　页面中的块级元素：按照从上到下的方式逐个排列 
　　页面中的行内元素：按照从左到右的方式逐个排列 
　　但是如何让多个块级元素在一行内显示? 
　　这里就引出了浮动定位 
2、浮动定位 float 
　　float属性 取值为 left/right 
　　这个属性原本不是用来布局的，而是用来做文字环绕的，但是后来人们发现做布局也不错，就一直这么用了，甚至有些时候都忘了用他做文字环绕 
3、相对定位 relative 
　　元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留 
　　属性：position 
　　取值：relative 
　　配合着 偏移属性(top/right/bottom/left)实现位置的改变
4、绝对定位 absolute 
如果元素被设置为绝对定位的话，将具备以下几个特征 
　　1、脱离文档流-不占据页面空间 
　　2、通过偏移属性固定元素位置 
　　3、相对于 最近的已定位的祖先元素实现位置固定 
　　4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定 
　　属性：position 
　　取值：absolute 
　　配合着 偏移属性(top/right/bottom/left)实现位置的固定
5、固定定位 fixed 
　　将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动 
　　属性：position 
　　取值：fixed 
　　配合着 偏移属性(top/right/bottom/left)实现位置的固定

二.浮动的效果
　　浮动 之后会怎么样？ 
　　1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 
　　2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 
　　3、浮动元素依然位于父元素之内 
　　4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 
注意 
　　1、一行内，显示不下所有的已浮动元素时，最后一个将换行 
　　2、元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定) 
　　3、元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大 
　　块级元素：允许修改尺寸 
　　行内元素：不允许修改尺寸 
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
　　浮动 之后会有什么样的影响？ 
　　由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷）

 

三.如何清除浮动(重点)
解决方案 及 原理分析

网上有很多种方法,我这里只介绍一种非常好用的方法,设置class名为clearfix

原理：如果子元素全部浮动，父元素就会塌陷，所以在所有浮动子元素后添加一个没有浮动元素把父元素撑起来，这个元素找不到、不占据空间，不能让它里面有内容，有内容也要隐藏

 

.clearfix:after
content:‘.‘;
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;

.clearfix:afterzoom：1；
/*解决IE的问题*///visibility：hidden；隐藏元素，但是位置留着//display：none；隐藏元素，不占据空间，彻底隐藏//after：伪对象选择符