摘要：清除浮动，为何要清除浮动浮动效果会带来不好的影响子元素浮动会带来父元素高度塌陷。，清除浮动的两大基本方式，运用清除浮动。元素流入页面时，在这个元素左边右边或两边不允许有浮动内容。除了是用来清除浮动的，其它代码都是为了隐藏掉生成的内容。
清除浮动 1，为何要清除浮动
浮动效果会带来不好的影响： 子元素浮动会带来父元素高度塌陷。
具体解释：
当浮动框高度超出包含框时，包含框不会 自动伸高 来闭合浮动元素，会出现“高度塌陷”现象。正是因为浮动的这种特性，导致本属于普通流中的元素 浮动后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0，在实际布局中，这并不是我们所希望的，所以需要闭合浮动元素，使包含框表现出正常的高度。
举例说明：
1）下图所示：普通流中，父元素container1高度为 3个div撑起的高度。
2）现在想要三个div并排显示，则将3个div设置float:left;效果如下。
问题出现了：父元素container1 高度塌陷了。
3）父元素container1高度塌陷，则其下方的元素会跑上来。
强调：
1）正常情况下：div中如果有内容，它能被内容撑出高度，但如果其中的内容是浮动的，则撑不起高度了，其高度变为0。
2）在上述例子中，container1本来是被撑出了高度的，但由于给div1,2,3设置了浮动，因此其高度没有了，变为了0。
1，运用clear:both;
clear:both; 清除浮动。元素流入页面时，在这个元素左边、右边或两边不允许有浮动内容。
1） “内墙法”： 在浮动元素最后添加一个冗余元素，并为其设置clear:both;
代码如下图：
原理：
由于它左右两边不能有浮动元素，因此，它会跑到浮动元素下方，而container1父元
素需要包裹住#cl ，其高度就被撑开了。注：#cl div其高度为0；
缺点：要在页面中添加没有意义的冗余元素，比较麻烦，而且不符合语义化。
2）clearfix:after 伪元素方法：给父元素添加一个clear类，既方便又符合语义化。
原理: 为了减少写一个无意义的div 元素，在clearfix 内容后面使用after添加一个content充当“元素”。
通过content:“.”；生成内容作为最后一个元素。
display:block; 使生成的元素以块级元素显示；
height:0; 避免生成内容破坏原有布局的高度；
visibility:hidden;使生成的内容不可见；
zoom:1；触发 IE hasLayout。
除了clear:both;是用来清除浮动的，其它代码都是为了隐藏掉content生成的内容。
更精简的写法：
附上content和after用法:
after用法举例：在container1尾部添加1个content，页面效果如下图所示。
2，父元素BFC或haslayout
父元素设置` overflow: hidden;
BFC相关知识还未完全理解，理解后再详细写。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116752.html
摘要：浮动元素性质，浮动的元素脱离标准流这个元素像从标准流中被删除一样。下图是左浮动时的显示效果。，浮动的元素会互相贴靠如果父元素的宽度能显示所有浮动元素，则浮动的元素会并排显示。，无论是块级元素行内元素，一旦浮动了，都可以设置宽高，不需要用。 浮动 1.1、语法： float: left; 左浮动，元素往最左边靠； float: right; 右浮动，元素往最右边靠 1.2...
摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。 写在前面：作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点...
摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...
摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。 这是CSS设计指南的读书笔记，用于加深学习效果。 上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。 盒子模型 所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。 可见的页面版式主要由三个属性...
摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。 这是CSS设计指南的读书笔记，用于加深学习效果。 上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。 盒子模型 所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。 可见的页面版式主要由三个属性...
阅读 732·2021-11-23 09:51
阅读 2429·2021-10-11 11:10
阅读 1297·2021-09-23 11:21
阅读 1088·2021-09-10 10:50
阅读 880·2019-08-30 15:54
阅读 3325·2019-08-30 15:53
阅读 3285·2019-08-30 15:53
阅读 3184·2019-08-29 17:23
