css清除浮动的原理

更新日期: 2019-06-02阅读: 2.2k标签: 浮动

最近学习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:伪对象选择符



链接: https://fly63.com/article/detial/3507

为什么设置overflow为hidden可以清除浮动带来的影响

在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动的方法,最常用的就是设置父元素的overflow:hidden这个属性

详解利用clear清除浮动的一些问题解决

我们一直在说 解决 高度塌陷都问题,从来没有说清除浮动。 是因为本质上,浮动并没被清除,我们只是利用clear属性解决了浮动元素带来的父级元素高度塌陷问题。而且clear属性影响也只是设置clear属性的元素本身,而不是浮动元素。

什么是BFC? CSS 如何使用伪元素清除浮动?

BFC概念:块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

清除浮动的4种方式

清除浮动:根据情况需要来清楚浮动 。清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。1.、额外标签法 给浮动盒子的后面添加一个新的div;2、overflow:hidden 触发了bfc模式

我对BFC的理解

对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。

Web布局:浮动

不知道大家是否和我有同样的一个感觉,每当拿起一篇杂志文章,总能发现左边或右边有图片,文字流畅地围着图片,这就是打印世界中看到的浮动:在Web的世界中,CSS的 float 设计初衷也是用来处理文本围绕图片排版的,就像在杂志布局中一样

总结清除浮动的方法

方法一、在结尾处添加空div标签clear:both;方法二、父级div定义 overflow: auto;方法三、使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)

CSS如何清除浮动?清除浮动的几种方式

在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性。爱,是因为通过浮动,我们能很方便地进行布局;恨,是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法

BFC是个啥?

在CSS布局中,是通过对一个个box的布局,来实现整体页面的布局,这一个个box也就是一个个容器元素,这些元素分为两类:块级元素(block),行内元素(inline)。 对于不同类型的元素

CSS浮动标准修复top塌陷和清除浮动及IE兼容标准格式

浮动元素有左浮动(float:left)和右浮动(float:right)两种,浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!