9、内部浮动无影响
.clearFix{overflow: hidden; zoom: 1}
.clear{zoom: 1}
.clear:after{content: ''; display: table;clear: both}
10、overflow 的 两栏自适应布局
设置左边浮动,右边overflow
.left { float: left; width: 128px }
.right { min-height: 190px; overflow: hidden; }
11、绝对定位元素不总是被父级overflow属性剪裁,尤其是overflow 在绝对定位元素机器包含块之间的时候。
12、ellipsis 文字溢出点点点省略
text-overflow: ellipsis
13、overflow 与 锚点,制作单页面应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;;
height: 300px;
border: 1px solid #ddd;
overflow: hidden;
}
.list{
text-align: center;
width: 300px;;
height: 300px;
font-size: 50px;
line-height: 300px;
}
#one{
background-color: #ff0043;
}
#two{
background-color: #00ff00;
}
#three{
background-color: #c06090;
}
#four{
background-color: #a069c3;
}
.an{
display: inline-block;
text-decoration: none;
color: #ffffff;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #cce2c1;
}
</style>
</head>
<body>
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="links">
<a class="an" href="#one">1</a>
<a class="an" href="#two">2</a>
<a class="an" href="#three">3</a>
<a class="an" href="#four">4</a>
</div>
</body>
</html>