css清除浮动的原理

番茄西红柿发布于2019-04-23 13:30 / 3055人阅读

摘要：最近学习发现了高度塌陷时候要清除浮动为了理解清楚浮动原理网上找了不少资料发现都写的不是很清楚而且都是一模一样的内容我在里分享一下我对清楚浮动原理的理解如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三如何清除浮动重点阅读一什么是浮动

最近学习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:after{zoom：1；}/*解决IE的问题*/
//visibility：hidden；隐藏元素，但是位置留着
//display：none；隐藏元素，不占据空间，彻底隐藏
//after：伪对象选择符

GPU云服务器云服务器清除浮动浮动-前端-css html浮动的影响的清除方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1964.html

几种有效的清除浮动的方法

摘要：浮动是布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为布局的难点之一浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。浮动是CSS布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为CSS布局的难点之一浮动框可以左右...

hss01248 2019-08-29 11:33 评论0 收藏0
几种有效的清除浮动的方法

摘要：浮动是布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为布局的难点之一浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。浮动是CSS布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为CSS布局的难点之一浮动框可以左右...

张金宝 2019-08-01 15:59 评论0 收藏0
CSS清除浮动方法大全

摘要：建议不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。评分父级也一起浮动原理所有代码一起浮动，就变成了一个整体优点没有优点缺点会产生新的浮动问题。这篇文章主要介绍了CSS清除浮动方法大全(小结)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1、父级div定义伪类：after和zoom ? 1 2 3 4 5 6 7 8 ...

FleyX 2019-08-29 17:25 评论0 收藏0
CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

摘要：方法三据说是最高大上的方法方法注意作用于浮动元素的父亲先说原理这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用和来在元素内部插入两个元素块，从面达到清除浮动的效果。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。一、抛一块问题砖（display： block）先看现象： showImg(https://segmentfault.com/img/bVrWvS)...

MAX_zuo 2019-08-28 18:28 评论0 收藏0
简述清除浮动

摘要：为什么要清除浮动影响其他元素定位父盒子高度为，子盒子全部浮动定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。清除浮动方法总结对父级元素设置高度对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置高度设置为内容高度。为什么要清除浮动？ 1、影响其他元素定位父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。 2.背景图片或颜...

FuisonDesign 2019-08-29 12:35 评论0 收藏0