overflow清楚浮动的影响

overflow

原文地址：https://www.jianshu.com/p/7e04ed3f4bea

我们都知道"overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。
然而"overflow:hidden"还有另外一个特殊的用途，那就是清除包含块内子元素的浮动。我们先来看一个实例：

//html
<body><div class="parent"><div class="child1"></div><div class="child2"></div></div>
</body>

// css
.parent{width:300px; background:#ddd; border:1px solid;
}
.child1{ width:100px; height:100px; background:pink;float:left;
}
.child2{ width:200px; height:50px; background:red;

上面的例子中，我们没有设置.parent的高度，所以.parent的高度默认为auto。由于.child1设置了浮动，脱离了文档流，所以.parent中只有.child2这一个文档流元素。现在我们给.parent添加"overflow:hidden"：

overflow清楚浮动的影响相关推荐

父元素浮动子元素会浮动吗_为什么quot;overflow:hiddenquot;能清除浮动的影响
来源 | https://www.jianshu.com/p/7e04ed3f4bea 我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高 ...
php元素浮动会产生哪些影响,元素浮动的影响与三列布局的实现原理——2019年9月4日22时30分...
一.元素浮动造成父元素高度折叠同一个块元素中,子级元素浮动,会造成附骥元素的高度折叠,包裹不住子级元素. 网页实际效果展示消除子元素浮动的影响实例 html> 清除浮动的影响 .box1 { ...
html清楚css的影响,08、清除浮动的影响.html
Document .box{ width:500px; background-color: darkcyan; } .box1{ width:200px; height:600px; backgrou ...
Web前端开发（三）--css优先级进阶，文本属性，元素类型转换，display，overflow，浮动，定位
一.选择器优先级进阶计算方式: 行间样式 1000 id 100 class 10 标签选择器 1 让每一个选择器对应的值相加,谁的值大谁的优先级就高. <!DOCTYPE html> ...
html5ul消除圆点,overflow清楚浮动 + 去掉li标签的小圆点
原文链接:http://blog.163.com/qqabc20082006@126/blog/static/22928525201031211212955/ 测试用例: 无标题文档 #wrapper ...
web前端-CSS(display，position，overflow和浮动float)
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...
html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
定义: 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素 ...
前端开发浮动相关的规则 overflow 0229
目标效果浮动带来的影响浮动的容器会盖住没浮动的元素解决办法把浮动的元素用一个没浮动的容器包裹起来开始代码基本内容元素浮动后面的盒子问题出现 hh类的盒子被盖住了解决被盖住的问题添 ...

overflow清楚浮动的影响

overflow

原文地址：https://www.jianshu.com/p/7e04ed3f4bea

overflow清楚浮动的影响相关推荐

最新文章

热门文章