聊城网站建设聊城,成都户外网站建设,c2c网站系统,广州抖音seo公司web前端学习路线分享CSS浮动-清除浮动篇#xff0c;为什么要清除浮动这里所说的清除浮动#xff0c;并不是不要浮动了#xff0c;而是清除浮动与浮动之间的影响。那么到底会有什么影响呢#xff1f;1#xff0e;高度塌陷举个例子我们看一下。我们在这里设置了div0是外容器…web前端学习路线分享CSS浮动-清除浮动篇为什么要清除浮动这里所说的清除浮动并不是不要浮动了而是清除浮动与浮动之间的影响。那么到底会有什么影响呢1高度塌陷举个例子我们看一下。我们在这里设置了div0是外容器div1是内部容器div1因为设置了宽高是100所以显示的时候就是一个橙色的100*100的方块但是div0仅设置了背景色因为div特有的独占一行宽度会自动100%高度被内部容器div1撑开了撑开的高度是100像素所有看到一个绿色高100像素宽度100%的容器现在我们给div1设置浮动这时候我们发现div0这个外容器没了看不见了。。别急我们在div0里打一些字看看我们发现aaa这些文字出来了环绕在橙色方块周围了这个原因在浮动中我们已经讲解了而且我们也发现绿色的容器也出来了但是它的高度仅仅是文字的行高。这就说明内部的橙色块设置浮动后它的父级容器绿色块就不知道橙色容器的高度了因此绿色容器的高度变成了0写入文字后绿色容器重新被撑开高度才可以看到。我们把这种情况称为高度塌陷。我们其实是希望一个容器中的内容不断的撑开容器的高度这样我们后续的内容就可以紧贴在上面了而网页中的内容并不是都是静态的很多都需要每天更新更新的内容多少图片高度都不相同。那么后面的东西想要紧贴上面的内容上面内容的高度就不能设置一个固定数值否则很多数据的时候放不下。如果不设置高度一旦设置浮动后就会出现高度塌陷。丢失了高度后页面后续的内容就会插在上面内容的底部页面就会错乱因此我们就需要做清除浮动来解决这个问题最终做到即使使用浮动外容器也会因为内容的多少自动撑开高度不会高度塌陷。margin padding设置值不能正确显示2Margin和padding属性值不正确由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。要来解决这个问题我们就必须来认识一下BFC什么是BFC要来理解BFC先介绍一下Box和Formatting ContextBox 是 CSS 布局的对象和基本单位 简单来说页面就是由Box组成元素的类型和 display 属性决定了这个 Box 的类型。 不同类型的 Box 会参与不同的 Formatting Context一个决定如何渲染文档的容器因此Box内的元素会以不同的方式渲染。1、block-level box:display 属性为 block, list-item, table 的元素会生成 block-level box。并且参与 block formatting context2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素会生成 inline-level box。并且参与 inline formatting context3、run-in box: css3 中才有 这儿先不讲了。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域并且有一套渲染规则它决定了其子元素将如何定位以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域只有Block-level box参与 它规定了内部的Block-level Box如何布局并且与这个区域外部毫不相干。BFC布局规则1内部的Box会在垂直方向一个接一个地放置。2Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3每个元素的margin box的左边 与包含块border box的左边相接触(对于从左往右的格式化否则相反)。即使存在浮动也是如此。4BFC的区域不会与float box重叠。5BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。反之也如此。6计算BFC的高度时浮动元素也参与计算瞧最后一条就是我们需要利用的了我们只需要利用BFC就可以解决浮动后外容器高度塌陷的问题如何生成BFC1. 根元素是BFC模式这种不能考虑因为都不是根元素2. 设置高度显然也是不可以的。3. float属性不为none本来就要设置浮动的。所以也不考虑4. position为absolute或fixed这样设置后就失去浮动的意义了。因此也不使用5. display为inline-block, table-cell, table-caption, flex, inline-flex虽然可以开启但是导致父元素原有宽度丢失6. overflow不为visible这种方法副作用比较小但是还是有问题的。比如overflow设置为hidden这个不行内容的高度是撑开的宽度也不能确定。设置为scroll会出现右边和下边的滚动条宽度设置为auto最合适不过如果里面的内容使用了定位并且超出去就会出现滚动条。所以只能保证内容不能有定位。Clear:both清除两者间顾名思义就是清除浮动我们看到如果要使用clear:both就需要给高度塌陷的容器里面最后追加一个div并且给这个div设置为clearboth我们发现这种使用方法比较麻烦每次设置都需要最后增加div。因此我们做了一个修改!DOCTYPE htmlhtml langenhead meta charsetUTF-8 titleTitle/title style#div0 {background-color: greenyellow; }#div1 {width: 100px;height: 100px;background-color: orange;float: left; } /*在外容器的里面最后添加内容*/ .clearFloat:after {content: ;/*添加一个空字符串*/display: block;/*设置这个空字符串是一个块这样会独占一行*/height: 0;/*设置这个添加的空字符串的高度是0*/visibility: hidden;/*不让这个空字符串显示*/clear: both;/*清除浮动*/ } .clearFloat {zoom: 1;/*IE6以下的浏览器也可以利用这种方式清除浮动*/ } /style/headbody div iddiv0 classclearFloat div iddiv1/div /div/body/html
