overflow标签的含义:
overflow属性其代表着 溢出元素内容区域的部分内容应该如何处理;
其属性值有 visible(可见的)这个是默认值,hidden(不可见的),scoll(以滚动条的形式出现)auto(浏览器会以滚动条的方式出现)inherit(继承父类的属性)属性介绍代码如下
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
其中结果如下:默认状况:
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的高度时,浮动元素也参与计算
所以有如下实例:
<html>
<head>
<meta charset="utf-8">
<title>overflow清除浮动原理</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
<div class="son1">
</div>
</div>
</body>
</html>
其作用是清除浮动:其前后对比的图