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教程