float布局打破標準流,神助攻clear清浮動

布局是什麼？根據功能劃分小塊，再根據設計稿還原，書寫靜態頁面，然後再在塊裡面填充內容，完善功能，js施加互動效果。div作為乙個容器，獨佔一行，**書寫習慣從上至下屬於標準流，而浮動float的css樣式則打破div（標準流）獨佔一行的傳統！具體**展示如下：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
6<
title
>float布局打破標準流,神助攻clear清浮動
title
>
7<
style 
type
="text/css"
>
8.box1>img
13/*
.box1,.box2,.box3,.box4,.box5 
*/20
/*如現在展示，我想要5個盒子一行展示,是不是要float,可是float後，我們發現本來包裹盒子的大容器box受到了浮動的影響，是不是要清浮動 ,我們發現給大盒子新增高度是可以撐開它的，但是這樣是不是太麻煩，如果裡面盒子的寬高變化，外面的盒子的高度是不是又要調整，那麼有沒有其他辦法了
*/21
.box1
27.box2,.box3,.box4,.box5
34.box
39.box6
/*新新增乙個class,用 clear: both;清除浮動
*//*
可是外面不能為了清除浮動就單獨新增乙個class在頁面上
*/42
43/*
重點來了:使用偽元素清除浮動
*/44
/*.box::after 
*/49
/*根據h2裡面的文字考慮的問題只能這樣展示 
*/50
.box::before,.box::after
54.box::after
57style
>
58head
>
59<
body
>
6064
<
div 
class
="box"
>
65<
div 
class
="box1"
>
div>
66<
div 
class
="box2"
>
div>
67<
div 
class
="box3"
>
div>
68<
div 
class
="box4"
>
div>
69<
div 
class
="box5"
>
div>
7071
div>
72<
h2>最後乙個問題來了，根據"盒模型大小取決於它的padding，margin，border數值"這篇文章介紹的margn值問題話，我們把.box裡面的border值去除下.box1不做浮動話，正常思維它和上面的box是有乙個margin值10px的間隔的，但是現在沒有
h2>
73body
>
74html
>

CSS布局與定位,flow流,float

web頁面布局分為 流體布局liquid layouts 無論瀏覽器調整到多大寬度,布局都會擴充套件,填滿整個瀏覽器。凍結布局fozen layouts 凍結布局會鎖定元素使之讓它們凍結在頁面上,以此可避免視窗擴充套件帶來的許多問題 慕課 在網頁中，元素有三種布局模型 1 流動模型 flow 2 浮...

HTML 標準文件流（float的浮動屬性）

html元素在標準狀況下的定位方式 行內元素在同一行內橫向排列 塊級元素佔滿整個一行，在頁面中豎向排列 元素不會移動到其它地方去，對於巢狀的元素盒子也是巢狀的 元素的浮動是指設定了浮動屬性的元素會脫離標準文件流的控制，移動到其父元素中相應位置的過程。在css中，通過float屬性來定義浮動，其基本語...

Float浮動布局

什麼是浮動布局？浮動可以設定元素，脫離正常的文件流，向右或者向左，靠近父元素的邊緣或者是設定了浮動的其他的元素的邊緣靠攏。比如，我們使用div等塊標籤的時候，它們都是獨佔一行，但是很多時候要將多個div併排放置，這種情況就可以使用浮動布局。浮動可以那些問題？使用浮動布局之後 這裡也是可以使用浮動解決...