Float佈局

時間 2019-12-01

標籤 float 佈局欄目 CSS 简体版

原文原文鏈接

語法：float:none|left|rightcss

None:對象不浮動html

Left:左浮動瀏覽器

Right:右浮動佈局

Float對標籤的影響;spa

1)對行內屬性標籤的影響code

能很好的支持height,width,margin,padding屬性的設置htm

2）對塊屬性標籤的影響對象

3）可使塊屬性元素在一排排列，默認佔滿行的塊屬性標籤在沒有設置寬高的狀況下設置浮動後變成內容撐間解析標籤時enter鍵形成的顯示間隙問題blog

具備float屬開寬度高度，一樣支持寬高設置圖片

4）解決瀏覽器之性的對象在父標籤中是不佔空間的

5）浮動會產生層疊效果，可是內容（例：圖片、文字）不會被層疊

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .out{
            height: 300px;
            width: 600px;
            border:1px solid red;
        }
        .out div{
            width: 100px;
            height: 100px;
        }
        .out div.left{
            float: left;
            background: red;
        }
        .out div.right{
            float: right;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

清除浮動的5種方式：

1）Clear

使用狀況：因爲元素的float，爲了避免影響下面元素的顯示。一般在這個浮動元素的後面加上<div class=「clear」> </div>來消除對後面元素顯示的影響。

Html:

<div class=」clear」> </div>

Css:

.claer{

Clear:both;  /*清除全部浮動*/

Height:0;   /*由於加空格的緣由，因此要設定寬度爲0*/

Overflow:hidden;  /*爲了兼容ie6*/

}

2）Position

 .out{

Position:absolute;

}

3）Overflow

若是一個父標籤內有float的子元素，給父元素設置Overflow:hidden屬性，則可清除子元素的浮動

   .out{

Overflow:hidden;

}

4）Float

子標籤浮動，給父標籤浮動

標籤嵌套時，若是父子標籤均浮動則不用給子標籤清浮動

5）After

 .out:after{

Content:」隨便寫」;

Display:block;

Height:0;

Clear:both;

Overflow:hidden;

}

選擇清除浮動位置時咱們應該注意如下二點：

1）清除浮動必定要在浮動標籤完成佈局後進行添加，不然會影響到浮動標籤的佈局

2）清除浮動必須與前面的浮動標籤屬於同級關係

Ie6下的橫向雙倍margin bug

Ie6會在特定的條件下，將設置的橫向margin值變成雙倍，條件：

①元素必須浮動（float）

②元素必須具備橫向margin，margin-left、margin-right

③元素必須是塊元素

④瀏覽器必須是ie6

解決方法：爲這個元素定義的css最後加上display：inline

豎向margin的疊加，可是這是針對未浮動（float）的元素，若是元素浮動，那麼上下間的margin仍然會採起加法而不是取其大者

-------------------------------------------------華麗的分割線--------------------------------------------

Float的移動原理：先浮後動

A元素若是是左浮動，首先會找上一個設置了左浮動的元素（B），而後沿B元素的右邊浮上去，而後再左移，若是在上浮過程當中沒有空間容納下A元素，A便會以B的底邊爲基線左移。

A元素若是是右浮動，首先會找上一個設置了右浮動的元素（B），而後沿B元素的左邊浮上去，而後再左移，若是在上浮過程當中沒有空間容納下A元素，A便會以B的底邊爲基線右移。

1. h5 float佈局
2. CSS 佈局Float 【1】
3. float流體佈局
4. 佈局-float-margin-padding
5. CSS佈局：float 流動佈局
6. CSS佈局(四) float詳解
7. 用float對元素佈局
8. CSS浮動佈局-float
9. 【css佈局】display、position、float、overflow
10. CSS 佈局之 float 和 position
更多相關文章...
• ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
• ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
• JDK13 GA發佈：5大特性解讀
• 再有人問你分佈式事務，把這篇扔給他

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。