CSS浮動

番茄西紅柿發(fā)布于2019-04-23 13:33 / 1960人閱讀

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

浮動到底是什么？

它既不是position，但又不在標準流里，那么它究竟是怎么定位的？

浮動一開始作為文字環(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不在標準流，但卻會在標準流占位

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>不浮動元素div>
<div class="float">浮動元素div>
<div class="bg">不浮動元素div>
 body>
html>

占位

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

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

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

那么浮動到底按照什么順序組合的？

我們來看代碼

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>