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

float

本质

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

浮动的特征

1. 包裹与自适应性。
2. 块状化，float不为none时，它的display就是block

万恶之源

• 使父元素的高度塌陷

  div {
  border: 1px solid red;
  }
  img {
  float: left;
  }
  

• 行框盒子和浮动元素的不可重叠性

  如果浮动元素和行框盒子的垂直高度有重叠，则行框盒子只会跟随浮动元素，而不会发生重叠。表现如下

  div {
  border: 1px solid red;
  }
  img {
  float: left;
  }
  p {
  width: 200px;
  }
  

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

清除浮动

• clear

  clear本质上并不是真正的清除浮动，而是让自己不和float元素在同一行内显示。

  clear属性只有块级元素才有效。所以经常这么写

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

  因为伪元素默认都是内联水平的，所以要display: block;（或者table，list-item都可以），这样是可以解决父元素高度塌陷问题，但是没有清除浮动，浮动依旧存在。

  .clear {
  width: 400px;
  }
  .clear::after {
  display: block;
  content: '';
  clear: both;
  }
  img:nth-child(1) {
  float: left;
  }
  img:nth-child(2) {
  float: right;
  }
  p {
  width: 300px;
  margin-top: -1px;
  }
  

  如果我们把margin-top设成0，效果和预期一样

如果margin-top设成负值，则它依旧会受到浮动的影响，如下

• BFC

  BFC全称为block formatting context,中文名为”块级格式化上下文”,BFC可以看做是一个结界，里面的元素无法影响外面的元素，反之一样，所以BFC不会发生margin重叠，可以用来清除浮动的影响。

  .box {
  overflow: hidden;
  }
  .left {
  float: left;
  }
  p {
  width: 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; width: 9999px;

overflow

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

overflow: hidden; 就相当于一个裁剪，不过它的裁剪界限在哪里？在border box的内边缘。

.box {
width: 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 {//左边和下边滚动条的宽度
width: 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 {
width: 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;
width: 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;
width: 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;
width: 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;
width: 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%;
width: 1px;
border: 0;
padding: 0;
margin: 0;
clip: rect(0 0 0 0);
}
.block {
display: inline-block;
text-decoration: none;
width: 2em;
height: 2em;
background-color: #ddd;
line-height: 2em;
text-align: center;
color: black;
margin-top: 1em;
}

这样同样也可以实现效果。

结语

阅读css世界第六章记录的笔记。