一、背景

在進行css的樣式設計時我需要完成下面的一種樣式設計如圖所示，但是在設計的過程中遇到了一個關於float的問題

二、思路

2.1 開始的想法

在這樣的佈局中我將上新、標題放入一個div中，價格單獨設定出來模型程式碼如下，這個時候由於tag-name和title-name同盒子，因此只需要將tag-name設定為float:right就可以了，但是結果如下：

<li>
    <div class="title-tag">
        <div class="title-name">上新</div>
        <div 
 
class="tag-name">木蘭從軍</div>
    </div>
    <div class="title-price">9.9元起</div>
    <div>
        <img src="./personImages/famous1.png" alt="not found!">
    </div>
</li>

2.2 問題原因

float:right的設定結果：造成這個原因是因為把tag-name設定為右浮動把下面的給提起來了，這樣的結果顯然不對。

三、解決

在css中設定位置的時候，都是自頂向下的設計，因此我們需要改變的是title-name的浮動位置，應該設定為向右浮動，這樣tag-name的值就會升起來補充左側的位置，完成整個css的樣式佈局。

.title-name {
    font-size: 26px;
    /*width: fit-content;*/
    height: 3em;
    /* 浮動的方式 */
    float: right;
    width: 36px;
    margin-top: 0;
    background-color: orangered;
    text-align: center;
    border-bottom-left-radius: 2ex;
    border-bottom-right-radius: 2ex;
    color: ghostwhite;
}

.tag-name 
 
{
    margin-right: 0;
    font-size: 28px;
    width: fit-content;
    /*margin-top: 2em;*/
    padding-top: 2em;
    /* 這樣的設定會造成浮動不正確 */
    /* float: right; */

}

四、效果展示

4.1效果展示

五、總結

css的樣式設定還是蠻有技巧的，需要多嘗試，並且對他的佈局，佈局方式需要有所瞭解，可以多從官網檢視內容。