float与overflow

float与overflow
从零开始的前端生活--float和overflow

float

本质

浮动的本质就是为了实现文字环绕效果。

浮动的特征
1. 包裹与自适应性。
2. 块状化，float不为none时，它的display就是block
万恶之源
- 使父元素的高度塌陷
```
<div>
    <img src="../image/pic03.png" alt="">
</div>
```
```
div {
    border: 1px solid red;
}

img {
    float: left;
}
```
- 行框盒子和浮动元素的不可重叠性
  
  如果浮动元素和行框盒子的垂直高度有重叠，则行框盒子只会跟随浮动元素，而不会发生重叠。表现如下
```
<div>
    <img src="../image/pic03.png" alt="">
</div>
<p>十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
```
```
div {
    border: 1px solid red;
}

img {
    float: left;
}

p {
     200px;
}
```
图中的行框盒子，我手动圈起来了。凡是和浮动元素垂直高度有重叠的行框盒子都会排在它后面，就像被卡住了一样，即使margin负值也移动不了。

清除浮动
- clear
  
  clear本质上并不是真正的清除浮动，而是让自己不和float元素在同一行内显示。
  
  clear属性只有块级元素才有效。所以经常这么写
```
.clear::after{
    content: '';
    display: block;
    clear: both;
}
```
  因为伪元素默认都是内联水平的，所以要display: block;（或者table，list-item都可以），这样是可以解决父元素高度塌陷问题，但是没有清除浮动，浮动依旧存在。
```
<div class="clear">
    <img src="../image/pic05.png" alt="">
    <img src="../image/pic04.png" alt="">
</div>
<p>
    十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。
</p>
```
```
.clear {
     400px;
}

.clear::after {
    display: block;
    content: '';
    clear: both;
}

img:nth-child(1) {
    float: left;
}

img:nth-child(2) {
    float: right;
}

p {
     300px;
    margin-top: -1px;
}
```
  如果我们把margin-top设成0，效果和预期一样
如果margin-top设成负值，则它依旧会受到浮动的影响，如下
- BFC
  
  BFC全称为block formatting context,中文名为"块级格式化上下文",BFC可以看做是一个结界，里面的元素无法影响外面的元素，反之一样，所以BFC不会发生margin重叠，可以用来清除浮动的影响。
```
<div class="box">
    <img src="../image/pic03.png" alt="" class="left">
    <p>
        十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。
    </p>
</div>
```
```
.box {
    overflow: hidden;
}
.left {
    float: left;
}

p {
     200px;
    overflow: hidden;
}
```
  实现了我们想要的两栏目效果
给p标签增加，overflow: hidden;触发BFC，使p标签具有BFC的属性，则p标签为了不与浮动元素有任何交集，就顺着浮动边缘形成自己封闭上下文。

如果图文之间要有间距，推荐使用这样，可以大规模复用
```
.left {
    float: left;
    margin-right: 20px;
}
```
这样就可以控制间距了，也可以设置透明border或padding来控制间距。

BFC的声明：
1. 借助overflow属性
  
  overflow: hidden;
2. 融合display: table-cell 和 display: inline-block;
  
  display: table-cell; 9999px;
overflow

上面写了，最好清除浮动的是使用BFC结界，利用overflow：hidden;

overflow: hidden; 就相当于一个裁剪，不过它的裁剪界限在哪里？在border box的内边缘。
```
<div class="box">
    <img src="../image/pic01.jpg" alt="">
</div>
```
```
.box {
     150px;
    height: 150px;
    padding: 20px;
    border: 20px solid pink;
    overflow: hidden;
}
```
属性值
- visible: 默认值
- hidden: 裁剪
- scroll: 滚动条区域一直在
- auto：不足以滚动时没有滚动条，可以滚动时出现滚动条
这个是overflow设置为auto的时候，出现了滚动条。

虽然滚动条有点丑，但是对于支持-webkit-前缀的浏览器可以这样改
- 整体部分， ::-webkit-scrollbar
- 两端按钮, ::webkit-scrollbar-button
- 外层轨道，::-webkit-scrollbar-track
- 内层轨道，::-webkit-scrollbar-track-piece
- 滚动滑块，::-webkit-scrollbar-thumb
- 边角，::-webkit-scrollbar-corner
```
::-webkit-scrollbar {//左边和下边滚动条的宽度
     8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {//拖动条
    background-color: skyblue;
    border-radius: 6px;
}

::-webkit-scrollbar-track {//背景槽
    background-color: #ddd;
    border-radius: 6px;
}
```
scrollbar里面的宽高对应的就是左边和下边滚动条的宽度，scrollbar-thumb对应拖动条样式，scrollbar-track对应背景槽。

overflow搭配其他属性

单行文字溢出实现...效果。
```
<p>十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
```
```
p {
     200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
```
text-overflow 、 white-space 、overflow这三个声明比不可少，效果如下

对于-webkit-私有前缀支持良好的浏览器可以实现多行打点效果，无须依赖overflow:hidden;
```
.ell-rows-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;//最多显示2行内容
}
```
瞄点定位

触发瞄点定位行为的发生
1. URL地址中的瞄链与瞄点定位行为的发生
  
  比如：某个网址 xxxxx/xx.html#hash,后面的#是哈希值，瞄链值，然后这个瞄链值就会在页面中找到对应的元素。
  
  例如回到顶部可以这么写，
```
<a href="#">返回顶部</a>
```
  但是这样写，地址栏url地址会多一个#
2. focus的瞄点元素处于focus状态。
  
  focus瞄点定位指的是类似连接或者按钮、输入框等可以被focus元素在被focus时发生的页面充定位现象。例如在pc端，可以使用Tab快速定位可以focus的元素，
两者区别：

URL地址瞄链定位，是让元素定位在浏览器窗体的上边缘。

focus瞄点定位，是让元素在浏览器窗体范围内显示即可，不一定是在上边缘。、

瞄点定位行为的本质是通过改变容器滚动高度或宽度来实现。容器，容器，所以瞄点定位也可以发生在普通的容器元素上面。定位的行为是由内到外，普通元素和窗体同时可滚动的时候，会由内到外触发所有可滚动窗体的瞄点定位行为。

例如
```
<div class="container1"></div>
<div class="box">
    <p id="hash1">hash1:十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
    <p id="hash2">hash2:大江东去，浪淘尽，千古风流人物。 故垒西边，人道是，三国周郎赤壁。</p>
    <p id="hash3">hash3:前瞻马耳九仙山。碧连天。晚云间。城上高台，真个是超然。莫使匆匆云雨散，今夜里，月婵娟。</p>
</div>
<div class="container2"></div>
<div class="container3"></div>
```
```
.box {
    overflow: auto;
     200px;
    height: 200px;
}

.container1 {
    height: 300px;
    background-color: pink;
}

.container2 {
    height: 300px;
    background-color: skyblue;
}

.container3 {
    height: 300px;
    background-color: yellow;
}
```
所谓由内到外，box里面滚动条先定位到瞄点，一层一层往外，最后浏览器在瞄点定位，图中hash3的最上方的那条线就是浏览器窗体的上边缘。

设置成overflow: hidden; 也可以滚动瞄点定位，剪裁不是真正把内容剪没掉了，和auto等区别在于有没有滚动条，把上面的auto改成hidden，效果还是一样，只是没有了滚动条。但还是可以发生瞄点定位的。

选项卡

最后可以利用overflow: hidden;和瞄点定位来实现选项卡
```
<div class="container">
    <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="link">
        <a class="block" href="#one">1</a>
        <a class="block" href="#two">2</a>
        <a class="block" href="#three">3</a>
        <a class="block" href="#four">4</a>
    </div>
</div>
```
```
.container {
    text-align: center;
}

.box {
    height: 10em;
    line-height: 10em;
     20em;
    border: 1px solid #ddd;
    overflow: hidden;
    margin: auto;
}

.list {
    background-color: #ddd;
    text-align: center;
    font-size: 8em;
}

.block {
    display: inline-block;
    text-decoration: none;
     2em;
    height: 2em;
    background-color: #ddd;
    line-height: 2em;
    text-align: center;
    color: black;
    margin-top: 1em;
}
```
重点就几行代码，效果如下

点击相应的1,2,3,4,会自动瞄点切换，该技术就是用到overflow: hidden;加上瞄点定位。挺巧妙的，但是有缺点，就是这个是url瞄点定位，因此选项卡的上面就是浏览器的上边缘，解决办法就是，利用focus瞄点定位，因为focus瞄点定位的特点是：只要定位的元素在浏览器窗体中，就不会触发窗体的滚动。所以可以这样改。

因为focus瞄点定位需要focus能作用的元素，所以我们在list中插入input，再利用lable让input聚焦。
```
<div class="container">
    <div class="box">
        <div class="list"><input id="one">1</div>
        <div class="list"><input id="two">2</div>
        <div class="list"><input id="three">3</div>
        <div class="list"><input id="four">4</div>
    </div>
    <div class="link">
        <label class="block" for="one">1</label>
        <label class="block" for="two">2</label>
        <label class="block" for="three">3</label>
        <label class="block" for="four">4</label>
    </div>
</div>
```
```
.container {
    text-align: center;
}
.box {
    height: 10em;
    line-height: 10em;
     20em;
    border: 1px solid #ddd;
    overflow: hidden;
    margin: auto;
}

.list {
    background-color: #ddd;
    text-align: center;
    font-size: 8em;
    position: relative;
}

.list>input {
    position: absolute;
    top: 0;
    height: 100%;
     1px;
    border: 0;
    padding: 0;
    margin: 0;
    clip: rect(0 0 0 0);
}

.block {
    display: inline-block;
    text-decoration: none;
     2em;
    height: 2em;
    background-color: #ddd;
    line-height: 2em;
    text-align: center;
    color: black;
    margin-top: 1em;
}
```
这样同样也可以实现效果。

结语

阅读css世界第六章记录的笔记。
相关阅读:
CF1480
网络编程中常见地址结构与转换（IPv4/IPv6)
inet_pton, inet_ntop
mktime 夏令时
 C/C++中volatile关键字详解
 STL之vector容器详解
 Linux学习--gdb调试
 Linux编程基础——GDB（设置断点）
FTP模式简式：PORT/PASV/EPRT/EPSV
strchr和strstr 函数
原文地址：https://www.cnblogs.com/Dusks/p/13152999.html

从零开始的前端生活--float和overflow

float

本质

浮动的特征

万恶之源

清除浮动

overflow

属性值

overflow搭配其他属性

瞄点定位

选项卡

结语