淺談HTML5中的浮動問題

時間 2019-11-19

標籤淺談 html5 html 浮動問題欄目 HTML5 简体版

原文原文鏈接

浮動是咱們在前端頁面中常常會用到的一種佈局方式。那什麼是浮動呢?前端

首先咱們先來看一下它的定義。浮動是指讓元素脫離文檔標準流(脫標),按照指定的方向去橫向排列。浮動的取值有兩個,分別是float:left;(向左浮動) float:right;(向右浮動) ide

那浮動都有哪些特色呢? 浮動有四個特色:(1) 可使元素脫離標準流;(2)可使元素改變形態,如:浮動的塊標籤,寬度變爲內容撐開的寬度;又如sapn標籤,浮動後能夠設置其寬高。(3)浮動的元素頂部對齊成一行排列(也能夠說,浮動的元素之前面的一個元素的底部對齊。) (4)浮動不影響前面的元素,隻影響後面的元素。佈局

如今咱們來看一下它的應用場景。浮動經常使用於:導航條,文字環繞(浮動最開始就是爲了解決這個問題出現的),浮動佈局等等。文檔

雖然運用浮動是很方便咱們的頁面佈局,可是元素浮動後也會出現一些問題,這些問題是會影響咱們繼續咱們下面的頁面佈局,因此咱們要清除浮動。那麼問題來了,什麼叫清除浮動呢?難道是把咱們在源碼中寫的float:left;和float:right;去掉,NO,NO,NO,固然不是!!!源碼

清除浮動是清除因爲浮動帶來的不利影響。咱們要明白,咱們所說的清除浮動是清除浮動帶來的不利影響,這是由於浮動後的元素會對後面的元素會形成影響,致使網頁佈局出現問題。下面咱們就來講說如何清除浮動帶給咱們的不利影響。博客

清除浮動的方法總結起來有四種,分別是:父元素加高法,overflow方法,空標籤法和僞元素法。我會分別進行詳細介紹。頁面佈局

第一種方法:父元素加高法。給父元素設置高度。原理:子元素浮動後,脫離文檔流,父元素未設置高度的話,由於其內容是0(默認是內容撐開父元素的高的,但如今子元素浮動了),故父元素高度也會變爲0,致使後面的元素緊挨着父元素,與浮動元素衝突,使文檔的佈局出現問題。io

參考代碼以下:class

　　　　/*給父元素加高。不推薦使用*/
            height: 302px;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
        }
        section{
            height: 40px;
            border: 1px solid blue;
        }
    </style>

第二種方法:overflow方法。在父元素中加overflow:hidden;

參考代碼以下:

　　　　/*在父元素中加overflow:hidden;,可是這種方式也不推薦使用*/
           overflow:hidden;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
        }
        section{
            height: 40px;
            border: 1px solid blue;
        }
    </style>