成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS浮動(dòng)

番茄西紅柿 / 1965人閱讀

摘要：除非該元素前面還有一個(gè)浮動(dòng)元素，這時(shí)它就會(huì)緊挨著前面的元素。真正讓人迷惑的是浮動(dòng)元素會(huì)盡可能的居頂，并且垂直定位規(guī)則比水平浮動(dòng)規(guī)則的優(yōu)先級更高。

浮動(dòng)到底是什么？

它既不是position，但又不在標(biāo)準(zhǔn)流里，那么它究竟是怎么定位的？

 

浮動(dòng)一開始作為文字環(huán)繞圖片產(chǎn)生

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>  
<style type="text/css">
    
    img {
        width: 60px;
    float: right;
    margin: 20px;
}
.aside{
 float: right;width: 15em;margin: 0 1em 1em;padding: 0.25em;border:1px solid;
}
style>
head> 
<body>
   
   
<img src="icon_head.png" alt="icon_head.png"/>
<p >我是測試文字1我是測試文字我是測試文字2我是測試文字我是測3試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我4是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文5字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測6試文字我是測試p>

<p class="aside">
    
這又是另一端蚊子了
p>
<p >我是測試文字1我是測試文字我是測試文字2我是測試文字我是測3試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我4是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文5字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測試文字我是測6試文字我p>
 body>
html>
文字環(huán)繞圖片

（如果看不到環(huán)繞效果，試試把窗口變小）

float不在標(biāo)準(zhǔn)流，但卻會(huì)在標(biāo)準(zhǔn)流占位

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>  
<style type="text/css">
    
    .float{float: left;
    background: red;
    margin: 10px;}
    .bg{background: green;}
style>
head> 
<body>
   
   <div>不浮動(dòng)元素div>
<div class="float">浮動(dòng)元素div>
<div class="bg">不浮動(dòng)元素div>
 body>
html>
占位

這個(gè)占位很神奇，浮動(dòng)元素在下一元素的盒模型內(nèi)，有點(diǎn)像ps添加了一個(gè)層，但這個(gè)層不是簡單覆蓋，而是告訴下一層這個(gè)位置我占了，你往旁邊去吧！

還有，行內(nèi)元素被設(shè)置浮動(dòng)后，可以設(shè)置高度和寬度，這是為什么呢？

這個(gè)行內(nèi)元素就像被設(shè)置成inline-block一樣，但和inline-block比又多了浮動(dòng)的功能，具體原因還不清楚待查

那么浮動(dòng)到底按照什么順序組合的？

我們來看代碼

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>  
<style type="text/css">
    ul{list-style: none;width: 350px;}
    ul li{float:left;margin:4px;}
    img {   
    vertical-align: top;
}
style>
head> 
<body>
   
   <ul>
    <li><img src="http://placehold.it/100x100&text=1"/>li>
    <li><img src="http://placehold.it/100x150&text=2"/>li>
    <li><img src="http://placehold.it/100x100&text=3"/>li>
    <li><img src="http://placehold.it/100x100&text=4"/>li>
    <li><img src="http://placehold.it/100x100&text=5"/>li>
    <li><img src="http://placehold.it/100x150&text=6"/>li>
    <li><img src="http://placehold.it/100x100&text=7"/>li>
ul>


 body>
html>
排列

 

總的來說就是，浮動(dòng)元素會(huì)移到左側(cè)或右側(cè)。除非該元素前面還有一個(gè)浮動(dòng)元素，這時(shí)它就會(huì)緊挨著前面的元素。


真正讓人迷惑的是：浮動(dòng)元素會(huì)盡可能的居頂，并且垂直定位規(guī)則比水平浮動(dòng)規(guī)則的優(yōu)先級更高。

 

在這個(gè)例子中，圖片2撐高了該行的高度，所以在放完圖片3后，仍然有足夠的垂直空間放置圖片4。


記住，當(dāng)你有一個(gè)浮動(dòng)元素(不位于尾行)時(shí)，它后面的浮動(dòng)元素占用的垂直空間必須大于或等于它才會(huì)觸發(fā)換行。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2038.html

相關(guān)文章

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問主要來自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問題：1.浮動(dòng)的原始用途...

    Tonny 評論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問主要來自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問題：1.浮動(dòng)的原始用途...

    cyqian 評論0 收藏0

  • 了解CSS浮動(dòng)以及清理浮動(dòng)（Float）

    摘要：浮動(dòng)浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 CSS浮動(dòng) 浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 CSS ...

    TZLLOG 評論0 收藏0

  • 理解CSS浮動(dòng)與清除浮動(dòng)

    摘要：那我們舉個(gè)栗子當(dāng)先聲明一個(gè)元素向左浮動(dòng)時(shí)，由于脫離文檔流，這個(gè)元素的右邊就會(huì)空出一片空間，空間的長寬與浮動(dòng)元素長寬相同?？偨Y(jié)總結(jié)下來，浮動(dòng)與清除浮動(dòng)的順序關(guān)系如下設(shè)置元素浮動(dòng)，元素脫離文檔流，不計(jì)算高度。 本文主要探討兩個(gè)問題： 為什么CSS設(shè)置浮動(dòng)會(huì)引起父元素塌陷 為什么設(shè)置clear:both能清除浮動(dòng)，并撐開父元素。 起因 CSS的浮動(dòng)，算是我在寫網(wǎng)頁時(shí)用的最多的屬性之一。但...

    劉東 評論0 收藏0

  • CSS-清除浮動(dòng)

    摘要：清除浮動(dòng)方法方法一使用帶屬性的空元素在浮動(dòng)元素后使用一個(gè)空元素如，并在中賦予屬性即可清理浮動(dòng)。 什么是CSS清除浮動(dòng)？ 在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象...

    劉厚水 評論0 收藏0

  • CSS浮動(dòng)其實(shí)很簡單

    摘要：實(shí)驗(yàn)最基本測驗(yàn)浮動(dòng)實(shí)驗(yàn)對應(yīng)結(jié)果實(shí)驗(yàn)結(jié)果分析因?yàn)闉閴K標(biāo)簽，而且處于同一文檔流當(dāng)中，固會(huì)向下排列。實(shí)驗(yàn)左浮動(dòng)，右浮動(dòng)，左浮動(dòng)浮動(dòng)實(shí)驗(yàn)結(jié)果實(shí)驗(yàn)結(jié)果分析左浮動(dòng)，所以失去塊級作用，并且脫離標(biāo)準(zhǔn)文檔流，因此在第一行最左邊。 其實(shí)CSS浮動(dòng)原理就三句話，不像網(wǎng)上的某些文章說的天花亂墜！ 浮動(dòng)必會(huì)脫離文檔流 浮動(dòng)會(huì)失去塊級作用 浮動(dòng)只在自己所在位置那行向左或者向右浮動(dòng) 請仔細(xì)理解上面這三句話，下面...

    Jiavan 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<