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

 

本文转载于:猿2048⇛https://www.mk2048.com/blog/blog.php?id=i2ikhab&title=css清除浮动的原理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot03 项目热部署

1 问题 在编写springBoot项目时,经常需要修改代码;但是每次修改代码后都需重新启动,修改的代码才会生效 2 这么实现IDEA能够像Eclipse那样保存过后就可以自动进行刷新呢 将springBoot项目进行热部署即可 3 如何实现SpringBoot项目的热部署01 …

STM32实现流水灯

led.c #include"led.h"void Led_Init(void) {GPIO_InitTypeDef GPIO_VALUE; //???RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC,ENABLE);//???GPIO_VALUE.GPIO_ModeGPIO_Mode_Out_PP;//???? ????GPIO_VALUE.GPIO_PinGPIO_Pin_1|GPIO_Pin_2|GPIO_Pin_…

jacob 报错 Can't co-create object

问题:开始时一切正常,后来什么都没该,出现Cant co-create object报错,即是创建不了ActiveXComponent wdnew ActiveXComponent("Word.Application"); 偶尔发现任务管理器中word进程居然达到10个,而我没有打开…

map分组后取前10个_map根据属性排序、取出map前n个

/*** map根据value排序* flag 1 正序* flag 0 倒序** param map* param flag* return*/public static > LinkedHashMap sortByValue(Map map, int flag) {LinkedHashMap sortMap new LinkedHashMap<>();if (flag 1) {map.entrySet().stream().sorted(Comparator.c…

wxpython可视化_使用wxPython的绘图模块wxPyPlot进行数据可视化

[Python进阶(四十)-数据可视化の使用matplotlib进行绘图前言  matplotlib是基于Python语言的开源项目&#xff0c;旨在为Python提供一个数据绘图包。我将在这篇文章中介绍matplotlib A #-*- coding: utf-8 -*- ############################################################…

在Java EE 6中将Bean验证与JAX-RS集成

JavaBeans验证&#xff08;Bean验证&#xff09;是一种新的验证模型&#xff0c;可作为Java EE 6平台的一部分使用。 约束条件支持Bean验证模型&#xff0c;该约束以注释的形式出现在JavaBeans组件&#xff08;例如托管Bean&#xff09;的字段&#xff0c;方法或类上。 javax.…

如何让浮动的元素换行??css

当你想要做成这种布局效果的时候 紫色框里面的内容那样 它是一个列表 li元素是块级元素 默认大小是父元素ul的宽 并且换行 如果li没有背景的话那就不用管了 可是问题来了它不但有背景 而且是根据文字自适应的宽高 这就是inline-block类型的功能了 那么想让li是inline-bl…

Python学习之类和实例

面向对象最重要的概念就是类&#xff08;Class&#xff09;和实例&#xff08;Instance&#xff09;&#xff0c;必须牢记类是抽象的模板&#xff0c;比如Student类&#xff0c;而实例是根据类创建出来的一个个具体的“对象”&#xff0c;每个对象都拥有相同的方法&#xff0c;…

解决sublime里面的vue高亮的问题

下载插件文件&#xff1a;https://github.com/vuejs/vue-syntax-highlight 直接在官网下载放在安装时候的packages目录下&#xff08;sublime text3\Sublime Text3\Data\Packages&#xff09; 在Packages文件夹下新建一个vue的文件&#xff0c;把第一步下载的文件复制进去 subl…

python矩形填充颜色_在Python中找到所有用0填充的矩形

假设我们有一个二进制2D矩阵&#xff0c;现在我们必须找到所有用0填充的矩形的起点和终点。我们必须牢记&#xff0c;矩形是分开的&#xff0c;彼此之间不接触&#xff0c;但是它们可以接触阵列边界。仅包含单个元素的矩形也是可能的。所以&#xff0c;如果输入像-101110111011…

python concat_python中merge、concat用法

转载&#xff1a;https://blog.csdn.net/ly_ysys629/article/details/73849543 参考&#xff1a;https://blog.csdn.net/stevenkwong/article/details/52540605 数据规整化&#xff1a;合并、清理、过滤 pandas和python标准库提供了一整套高级、灵活的、高效的核心函数和算法将…

Vue使用axios无法读取data的解决办法

今天发现Vue中使用了axios后&#xff0c;then方法中无法读取到data中的数据了&#xff0c;总是提示 Cannot set property xxx of undefined 上网找了一圈后发现了一下解决方法。 解决办法1&#xff1a; methods:{tap:function(){var selfthis;axios.get(xxxxxx).then(function(…

设置博客园标题样式

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面&#xff0c;向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】&#xff0c;点击页面上的js权限申请&#xff0c;然后填写申请的理由&#xff0c;耐心等几分钟&#xff0c;再刷新一…

Spring 3.1 –从数据库加载XML配置的属性

Spring使通过其PropertyPlaceholderConfigurer和&#xff08;Spring 3.1之前&#xff09;PropertySourcesPlaceholderConfigurer&#xff08;Spring 3.1&#xff09;从属性文件中获取的值易于注入。 这些类实现了BeanFactoryPostProcessor接口&#xff0c;该接口使它们能够在初…

如何判断PHP 是线程安全还是非线程安全的

什么是线程安全与非线程安全&#xff1f; 线程安全就是在多线程环境下也不会出现数据不一致&#xff0c;而非线程安全就有可能出现数据不一致的情况。 线程安全由于要确保数据的一致性&#xff0c;所以对资源的读写进行了控制&#xff0c;换句话说增加了系统开销。所以在单线程…

关联查询mysql_《MySQL数据库》关联查询

原标题&#xff1a;《MySQL数据库》关联查询一、关联查询1、概念在查询数据时&#xff0c;所需要的数据不只在一张表中&#xff0c;可能在两张或多张表中。这个时候&#xff0c;需要同时操作这些表来查询数据&#xff0c;即关联查询。关联查询所涉及到的表与表之间都会存在有关…

python语言语块句的标记_《自然语言处理理论与实战》

编辑推荐 1.讲解自然语言处理的理论 2.案例丰富&#xff0c;实战性强 3.适合自然语言处理学习的入门者 内容提要 自然语言处理是什么&#xff1f;谁需要学习自然语言处理&#xff1f;自然语言处理在哪些地方应用&#xff1f;相关问题一直困扰着不少初学者。针对这一情况&#x…

NOIP2017年11月9日赛前模拟

最后一次NOIP模拟了 题目1&#xff1a;回文数字 Tom 最近在研究回文数字。  假设 s[i] 是长度为 i 的回文数个数&#xff08;不含前导0&#xff09;&#xff0c;则对于给定的正整数 n 有&#xff1a; 以上等式中最后面的括号是布尔表达式&#xff0c;Tom 想知道S[n] mod 2333…

height百分比失效

heigh:100%失效 解决方案&#xff1a; 第一种 html, body { height: 100%; } 第二种 div { height: 100%; position: absolute; } 非定位元素的宽高百分比计算不会将 padding 计算在内&#xff0c;而定位元素会计算在内。 利用这个特性可以实现图片左右半区点击分别上一张图…

Java堆空间,本机堆和内存问题

最近&#xff0c;我在和一个朋友讨论为什么Java进程使用的内存比启动Java进程时设置的最大堆多。 代码创建的所有Java对象都是在Java堆空间内创建的&#xff0c;其大小由-Xmx选项定义。 但是一个Java进程由很多空间组成&#xff0c;而不仅仅是Java堆空间。 以下是组成Java进程…