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

css清除浮动的原理的更多相关文章

  1. CSS清除浮动8大方法

    CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用D ...

  2. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  3. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  4. css清除浮动的八大方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

  5. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

  6. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  7. CSS清除浮动的方法及优缺点

    浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...

  8. css清除浮动clearfix:after的用法详解

    如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after ...

  9. CSS清除浮动大全的8种方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

随机推荐

  1. [BZOJ4521][Cqoi2016]手机号码 (数位dp)

    题目描述 人们选择手机号码时都希望号码好记.吉利.比如号码中含有几位相邻的相同数字.不含谐音不吉利的数字等.手机运营商在发行新号码时也会考虑这些因素,从号段中选取含有某些特征的号码单独出售.为了便于前 ...

  2. Django / Python 链接MySQL数据库

    https://www.cnblogs.com/wupeiqi/articles/5237704.html python (Django)中使用MySQL 首先python3中没有 MySQLdb 需 ...

  3. 2019年GPLT L2-4 彩虹瓶 比赛题解 中国高校计算机大赛-团体程序设计天梯赛题解

    彩虹瓶的制作过程(并不)是这样的:先把一大批空瓶铺放在装填场地上,然后按照一定的顺序将每种颜色的小球均匀撒到这批瓶子里. 假设彩虹瓶里要按顺序装 N 种颜色的小球(不妨将顺序就编号为 1 到 N).现 ...

  4. P3167 [CQOI2014]通配符匹配 题解

    题目 题目大意 给出一个字符串,其中包含两种通配符 ‘?’和 ‘*’ ,‘?’可以代替一个字符,‘*’可以代替一个字符串(长度可以为0) 然后给出几个字符转,判断能否用给出的字符串表示出来 样例解释 ...

  5. 在生产环境下禁用swagger

    学习目标 快速学会使用注解关闭Swagger2,避免接口重复暴露. 使用教程 禁用方法1:使用注解@Profile({"dev","test"}) 表示在开发或 ...

  6. zookeeper客户端使用第三方(zkclient)封装的Api操作节点

    1.引入依赖 <dependency> <groupId>com.101tec</groupId> <artifactId>zkclient</a ...

  7. Go语言基础之20--web编程框架之Gin框架

    一.Gin框架介绍 1.1 简介 A. 基于httprouter开发的web框架. http://github.com/julienschmidt/httprouter B. 提供Martini风格的 ...

  8. maven set MAVEN_OPTS

    http://juvenshun.iteye.com/blog/240257 https://docs.alfresco.com/5.1/tasks/alfresco-sdk-install-mave ...

  9. 转 oracle 默认自动统计信息 时间修改

    ############sql3: https://blog.csdn.net/dataminer_2007/article/details/41363417http://blog.51cto.com ...

  10. java多线程-创建线程

    大纲: Thread创建线程. Runnable接口. Callable接口. 小结 一.java创建线程--继承Thead类 创建一个类继承Thead类,并重写run方法. class Test { ...