overflow:hidden标签的作用；及其清除浮动的原理 |
您所在的位置：网站首页 › 清除浮动作用 › overflow:hidden标签的作用；及其清除浮动的原理 |
overflow:hidden标签的作用；及其清除浮动的原理
|
overflow标签的含义：
overflow属性其代表着 溢出元素内容区域的部分内容应该如何处理； 其属性值有 visible（可见的）这个是默认值,hidden（不可见的），scoll（以滚动条的形式出现）auto（浏览器会以滚动条的方式出现）inherit(继承父类的属性)属性介绍代码如下 overflow .father{ width: 400px; height:400px; background-color: #0000FF; border: 1px solid #0000FF;/*解决外边距合并问题*/ /* overflow: hidden; */ /* overflow: scroll; */ } .son{ margin-top:200px; margin-left:200px; width: 400px; height:400px; background-color: pink; }其中结果如下：默认状况：
overflow：hidden；属性
overflow:scoll；属性
然后就是overflow清楚浮动的原理了； 首先我们要了解BFC规则（Block Formatting Context）块格式化上下文 其本身就相当于一个独立的布局环境； 触发bfc规则要有以下几个条件： 1.body为根目录 2.浮动元素：float:none;以外的值； 3.绝对定位的元素：position：fixd absolute; 4.overflow:除了默认值以外； 5.display：nline-block、table-cells、flex； 当满足以上条件时就可以触发bfc规则： bfc布局规则： 内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算所以有如下实例： overflow清除浮动原理 .father{ width: 100%; /* height: 200px; */ background-color: aquamarine; border: 1px solid blue; } .son{ width: 100px; height: 200px; background-color: black; float: left; } .son1{ width: 200px; height: 100px; background-color: blueviolet; }
其作用是清除浮动：其前后对比的图 |
【本文地址】