CSS基礎（六）：浮動深刻

時間  2019-12-04
標籤 css 基礎 浮動 深刻 欄目 CSS 简体版
原文   原文鏈接

參考了《CSS完全設計研究》的文章，說的很不錯，因此拿來作筆記。css

 

浮動html

在標準流中，一個塊級元素在水平方向會自動伸展，直到包含它的元素邊界；而在豎直方向和兄弟元素依次排列，不能並排。使用浮動方式後，塊級元素的表現就會不一樣。簡單的說多個不設寬度的塊級的元素能夠橫向排列。瀏覽器

CSS中有float屬性，默認爲none，也就是標準流一般的狀況。若是將float屬性設置爲left或right，元素就會向其父元素的左側或右側緊靠，同時默認狀況下，盒子的寬度再也不伸展，而是根據盒子裏面的內容的寬度來肯定。ide

 

準備代碼佈局

先製做一個頁面，而後再設置浮動進行分析。url

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float屬性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 這裏設置son1的浮動方式*/

}

.son2{
/* 這裏設置son1的浮動方式*/

}

.son3{
/* 這裏設置son1的浮動方式*/

}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字.</p>
    </div>
</body>
</html>
View Code

 

設置第1個浮動div spa

能夠看到標準流中的Box-2的文字在圍繞着Box-1排列，此時Box-1的寬度再也不伸展，而是能容納下內容的最小寬度。那麼Box-2的盒子寬度範圍如何肯定呢？用Firebug能夠發現，是與Box-1的左邊框重合，由於此時Box-1已經脫離標準流，標準流中的Box-2會頂到原來Box-1的位置，而文字會圍繞着Box-1排列。設計

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float屬性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son2{
/* 這裏設置son1的浮動方式*/

}

.son3{
/* 這裏設置son1的浮動方式*/

}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字.</p>
    </div>
</body>
</html>
View Code

 

設置第2個浮動div3d

將Box-2的float屬性也設置爲left，能夠看到Box-2也變爲根據內容肯定寬度，並使Box-3的文字圍繞Box-2排列。Box-2的盒子寬度code

也是與Box-1的左邊框重合，Box-1和Box-2之間的空白是由二者的空白疊加而造成的。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float屬性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son2{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son3{
/* 這裏設置son1的浮動方式*/

}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字.</p>
    </div>
</body>
</html>
View Code

 

設置第3個浮動div

能夠看到文字會圍繞浮動的的盒子排列。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float屬性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son2{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son3{
/* 這裏設置son1的浮動方式*/
float:left;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字.</p>
    </div>
</body>
</html>
View Code

 

改變浮動的方向

將Box-3改成向右浮動，能夠看到Box-3移動到了最右端，文字段落盒子的範圍沒有改變，可是文字變成了夾在Box-2和Box-3之間。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float屬性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son2{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son3{
/* 這裏設置son1的浮動方式*/
float:right;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字.</p>
    </div>
</body>
</html>
View Code

當慢慢縮小瀏覽器窗口時，Box-2和Box-3的距離會愈來愈小，文字會佈滿空間，但縮小到必定程度時，Box-3會被擠到下一行，但仍保持向右浮動。

 

再次改變浮動的方向

將Box-2改成向右浮動，Box-3改成向左浮動。佈局和上面例子同樣。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float屬性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 這裏設置son1的浮動方式*/
float:left;
}

.son3{
/* 這裏設置son3 的浮動方式*/
float:left;
}

.son2 {
/* 這裏設置son2 的浮動方式*/
float:right;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字.</p>
    </div>
</body>
</html>
View Code

當慢慢縮小瀏覽器窗口時，Box-2和Box-3的距離會愈來愈小，文字會佈滿空間，但縮小到必定程度時，Box-3會被擠到下一行，但仍保持向左浮動。

 

清除浮動

使用clear屬性清除浮動，設置爲left，消除左邊浮動的影響；設置爲right，消除右邊浮動的影響；當設置爲both，同時消除左右兩邊浮動的影響。後面將會在CSS技巧教程中介紹到。 

 

做者： ForEvErNoME
出處： http://www.cnblogs.com/ForEvErNoME/
歡迎轉載或分享，但請務必聲明文章出處。若是文章對您有幫助，但願你能 推薦 或 關注
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程