float与overflow

时间  2020-06-19
标签 float overflow 栏目 CSS 繁體版
原文   原文链接

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

float

本质

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

浮动的特征

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

万恶之源

  • 使父元素的高度塌陷html

    <div>
    <img src="../image/pic03.png" alt="">
</div>
    div {
    border: 1px solid red;
}

img {
    float: left;
}

    float1

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

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

    <div>
    <img src="../image/pic03.png" alt="">
</div>
<p>十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
    div {
    border: 1px solid red;
}

img {
    float: left;
}

p {
    width: 200px;
}

    float2

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

清除浮动

  • clearurl

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

    clear属性只有块级元素才有效。因此常常这么写3d

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

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

    <div class="clear">
    <img src="../image/pic05.png" alt="">
    <img src="../image/pic04.png" alt="">
</div>
<p>
    十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。
</p>
    .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，效果和预期同样orm

    float3

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

float4

  • 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 {
    width: 200px;
    overflow: hidden;
}

    实现了咱们想要的两栏目效果

    float5

给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的内边缘。

<div class="box">
    <img src="../image/pic01.jpg" alt="">
</div>
.box {
    width: 150px;
    height: 150px;
    padding: 20px;
    border: 20px solid pink;
    overflow: hidden;
}

overflow1

属性值

  • visible: 默认值
  • hidden: 裁剪
  • scroll: 滚动条区域一直在
  • auto： 不足以滚动时没有滚动条，能够滚动时出现滚动条

overflow2

这个是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;
}

scroll

scrollbar里面的宽高对应的就是左边和下边滚动条的宽度，scrollbar-thumb对应拖动条样式，scrollbar-track对应背景槽。

overflow搭配其余属性

单行文字溢出实现...效果。

<p>十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
p {
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

text-overflow 、 white-space 、overflow这三个声明比不可少，效果以下

overflow3

对于-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;
}

overflow4

所谓由内到外，box里面滚动条先定位到瞄点，一层一层往外，最后浏览器在瞄点定位，图中hash3的最上方的那条线就是浏览器窗体的上边缘。

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

overflow5

选项卡

最后能够利用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;
}

重点就几行代码，效果以下

tabbar

点击相应的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世界第六章记录的笔记。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程