css-讓我們再深入一點看看ul-li結構裡的浮動和絕對定位（float & absolute）

工地程式設計_大奶夫發表於2017-12-21
CSS

有哪裡不懂的，請在下面留言，我每天都看，有時間我會一一解答，看評論區也許有人提出了跟你同樣想問的問題，可以看看我給出的回答，不用重複提問。

  • 浮動和絕對定位的基礎知識網上隨處可見，請自行查閱資料，本篇是幫助你在某場景下正確的用上你學到的知識、在莫名其妙前面找出問題所在、在做什麼的時候可能會出現這樣的問題、進一步的規範的css，本篇如出現錯誤，還勞煩請您在評論區指出，在此先表示感謝。

浮動裡面的浮動

css-讓我們再深入一點看看ul-li結構裡的浮動和絕對定位（float & absolute）

  • 其實我們平時用的一些清除浮動的方法裡面有一些叫做閉合浮動,此處不詳解到底該叫清除還是叫閉合，請自行查閱相關資料
  • 結構如圖如程式碼所示，左右兩個UL，一個浮左，一個浮右
  • 基本概念，如果一個父元素的高度是由子元素所撐開的，父元素不做任何處理，子元素浮動，則父元素高度消失
  • 一般水平導航的做法是用li裡面的元素去撐開li的高度，li設定了浮動，ul在不做處理的情況下高度會消失，在這個示例裡面，我們是有左右兩個浮動的ul，所以這裡不需要用.clearfix等方式再處理一遍，這裡已經算是清除了浮動，因為float具有間接“包裹性”，包裹性相關資料請點選這裡，首先明確一點，“包裹性”可以用來清除浮動，我之前寫的YY遊戲頁面裡面有講到一小段float會隱式的改變display，讓其變成inline-block，因為inline-block具有“包裹性”，然後這裡的ul加上float之後高度沒有消失，如果嫌繞，可以理解為，浮動裡面有浮動，這個浮動的父元素高度不會消失。
<div class="container clearfix">
    <ul class="nav nav-1">
        <li><a href="#">愛你</a></li>
        <li><a href="#">愛我</a></li>
        <li><a href="#">愛她</a></li>
        <li><a href="#">綠帽</a></li>
        <li><a href="#">老王</a></li>
    </ul>
    <ul class="nav nav-2">
        <li><a href="#">愛你</a></li>
        <li><a href="#">愛我</a></li>
        <li><a href="#">愛她</a></li>
        <li><a href="#">綠帽</a></li>
        <li><a href="#">老王</a></li>
    </ul>
</div>
複製程式碼
* {
    margin: 0;
    padding: 0;
}

body {
    background: #E0FFFF;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
    width: 1200px;
    background: #C1FFC1;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

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


/* -------------------- */

.nav-1 {
    float: left;
}

.nav-2 {
    float: right;
}

.nav li {
    float: left;
}

.nav li a:hover {
    background: #63B8FF;
}

.nav li a {
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    padding: 10px 20px;
    margin: 0 10px;
    background: #6495ED;
    color: #fff;
}
複製程式碼

絕對定位（absolute）的隱式改變

浮動的問題主要還是ul-li等結構裡用得比較多，這裡我用上一篇的例子進行詳細講解,css-3秒（大概吧...）快速擼出YY遊戲頁面（三）

css-讓我們再深入一點看看ul-li結構裡的浮動和絕對定位（float & absolute）

在這裡只講解左半邊的輪播圖這個部分裡面關於浮動的問題，這裡的這個輪播圖的實現方式的結構是ul-li結構，每個li裡面放了圖片和圖片描述，給li設定浮動讓五張圖成一行排列，然後再給大盒子設定固定寬高和超出隱藏作為可視區域且設定relative，包含li的ul設定absolute再用JS來控制其left值來實現輪播效果。
在這裡的重點在於，這裡的實現輪播方式的html結構ul加上absolute，對於大部分還沒有深入去查閱相關資料的初學者們可能會說：誒，你這個ul不是浮動的，那得再加個.clearfix吧？其實這裡已經清除浮動了，用chrome除錯工具滑鼠移到這塊，你可以看到這裡雖然沒有加.clearfix，但ul還是有高度的，這是因為這裡的absolute清除了浮動影響，absolute和float一樣會隱式的改變display，讓其變成inline-block，如果上所說，inline-block具有包裹性，這裡加上absolute之後就清除浮動了，你也可以手動試試單獨給你想清除浮動的元素加上inline-block去驗證一下，同樣具有包裹性的還有一個是overflow:hidden;也可以清除浮動

<div class="banner fl">
    <ul class="banner_list">
        <li>
            <img src="images/banner/3.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯頓發撒的發撒的發是</h3>
            </div>
        </li>
        <li>
            <img src="images/banner/2.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯頓發撒的發撒的發是</h3>
            </div>
        </li>
        <li>
            <img src="images/banner/3.jpg" alt="">
                    <div class="banner_fd">
                <h3>阿斯頓發撒的發撒的發是</h3>
            </div>
        </li>
         <li>
            <img src="images/banner/4.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯頓發撒的發撒的發是</h3>
            </div>
        </li>
        <li>
            <img src="images/banner/5.jpg" alt="">
            <div class="banner_fd">
                <h3>阿斯頓發撒的發撒的發是</h3>
            </div>
        </li>
    </ul>
    <a href="" class="prev"></a>
    <a href="" class="next"></a>
</div>
複製程式碼
.banner {
    width: 497px;
    height: 246px;
    position: relative;
    overflow: hidden;
}

.banner_list {
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
}

.banner_list li {
    float: left;
    position: relative;
}

.banner_list img {
    width: 497px;
    height: 246px;
}

.banner_fd {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #fff;
}

.banner_fd h3 {
    font: 14px/16px "Microsoft YaHei", "微軟雅黑";
    height: 16px;
    border-left: solid 3px #DD3A29;
    padding-left: 8px;
    margin: 12px 9px;
}

.prev,
.next {
    width: 30px;
    height: 50px;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F000000', endColorstr='#7F000000');
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    margin-top: -45px;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}
複製程式碼

相關文章