什么是浮动塌陷css,CSS浮动塌陷和一点关于浮动的事儿

写于2017-07-16，但是发现简书比个人网站省力气得多，遂搬家至此；

把浮动塌陷拿出来做文章是因为之前没深究过它的原理，导致在布局中常因为浮动塌陷撑不开div而苦恼；

借此写个总结加深记忆，也顺便说说浮动和定位的那点事...

何谓“浮动塌陷”

先看一段代码

#aa{

margin: 100px 100px;

width: 500px;

height: auto;

border: 2px solid blueviolet;

}

#ff{

width: 50px;

height: 100px;

float: left;

border: 2px solid red;

}

代码运行结果如图：紫色div本应被红div撑开；

但由于红div浮动后脱离文档流导致紫div没有同一文档流的子元素，而heiight也没设定值，空的紫色div上下边就重合了。这就是浮动导致的浮动塌陷；

浮动塌陷

那么如何解决浮动塌陷？？

给父元素加overflow:hidden；

这种方法可能会导致下拉框等内容不可见，慎用；

给父元素加float:left/right；

使用此方法要注意浮动对布局是否有影响；

给父元素加position:absolute；

注意事项同上；

在浮动元素末尾添加一个空的标签例如

有人说这种方式引入了不必要的冗余元素；

父元素的after伪元素设置clear属性.clearfix:after{...}；

别人都说这个办法好；

最直接：给父元素设固定 height；

我个人最常用的是第四种和第五种，一个空div标签翻不了天，而且代码量少，对布局不会造成什么影响

其实它和添加一个伪元素的性质是一样的，只不过一个看得见一个看不见；

接下来再说说float 和position

浮动是个神奇的东西。给行内元素加上浮动，就会具有块状元素的特性；

浮动对position：absolute和display：flex的元素无效，也就是影响不了这两位；

浮动会影响position：relative。不信你可以试试，我就不贴demo了；

说到relative，很多同学初学时会很迷这块，现在一句话让你醍醐灌顶：“占着茅坑不拉屎！”有道理不；

想到什么日后再补充，毕竟float是个神奇物种，一时间也概括不全；

什么是浮动塌陷css,CSS浮动塌陷和一点关于浮动的事儿相关推荐

什么是浮动塌陷css,css样式float造成的浮动“塌陷”问题的解决办法
什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...
CSS元素高度塌陷的几种常见解决办法！
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
[css] 请你解释下什么是浮动和它的工作原理是什么？同时浮动会引起什么问题？
[css] 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题? 什么是浮动:我们在做布局的时候用到的一种技术,通过浮动可以让元素左右浮动,然后通过margin调整位置工作原理:使元素脱 ...
CSS相关知识点：6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
css防止高度塌陷,css之高度塌陷及其解决方法
浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素 ...
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
BFC机制 BFC(Block Formatting Context):块格式化上下文 BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互 ...
CSS高度塌陷问题（float塌陷margin塌陷）
目录一.float塌陷 1.问题 2.代码示例 3.解决方法 1.每个盒子设定固定的width和height 2.给外部的父盒子也添加浮动 3.给父盒子添加overflow属性. 4.父盒子里最下方 ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）
⼀. overflow:hidden 溢出隐藏给⼀个元素设置overflow: hidden,如果该元素中的内容超出了给定的宽度或⾼度,那么超出的部分将会被隐藏,不占位. <style typ ...

什么是浮动塌陷css,CSS浮动塌陷和一点关于浮动的事儿

什么是浮动塌陷css,CSS浮动塌陷和一点关于浮动的事儿相关推荐

最新文章

热门文章