今天的學習場景很獨特，為了能早點回家看到兩位寶寶，特地到廣州坐飛機，所以在機場中學習真的還是不錯的，下面就說一下今天的核心內容float，因為太累了，看的內容較少。
先來了解一下block元素和inline元素在文件流中的排列方式。
block元素通常被現實為獨立的一塊，獨佔一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padding屬性；
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設定width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文件流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文件流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。
只有絕對定位absolute和浮動float才會脫離文件流。
一部分無視和完全無視的區別？需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對於使用absolute position脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。(可以說是完全無視)
浮動的表現：
定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的浮動框之後的塊框表現得就像浮動框不存在一樣。（注意這裡是塊框而不是內聯元素；浮動框只對它後面的元素造成影響）
注意當初float被設計的時候就是用來完成文字環繞的效果，所以文字不會被擋住，這是float的特性，即float是一種不徹底的脫離文件流方式。無論多麼複雜的布局，其基本出發點均是：「如何在一行顯示多個div元素」。
現象1:
假如某個div元素a是浮動的，如果a元素上乙個元素也是浮動的，那麼a元素會跟隨在上乙個元素的後邊(如果一行放不下這兩個元素，那麼a元素會被擠到下一行)；如果a元素上乙個元素是標準流中的元素，那麼a的相對垂直位置不會改變，也就是說a的頂部總是和上乙個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文字依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列。
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
.div1
.div2
.div3
.div4
style
>
head
>
<
body
>
<
div
class
="div1"
>
div>
<
div
class
="div2"
>
div>
<
div
class
="div3"
>
div>
<
div
class
="div4"
>
div>
body
>
html
>
現象2:
(1)左右結構div盒子重疊現象，一般是由於相鄰兩個div乙個使用浮動乙個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。乙個使用浮動乙個沒有導致div不是在同個「平面」上，但內容不會照成覆蓋現象，只有div形成覆蓋現象。
解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的div設定margin樣式。
(2)上下結構div盒子重疊現象
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
style
type
="text/css"
>
* .container
#box1
#box2
#box3
style
>
head
>
<
body
>
<
div
class
="container"
>
<
div
id="box1"
>box1 向左浮動
div>
<
div
id="box2"
>box2 向右浮動
div>
div>
<
div
id="box3"
>box3
div>
body
>
body
>
html
>
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文字內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第乙個大盒子裡的子元素使用了浮動，脫離了文件流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
解決方法：
1、要麼給.container設定固定高度，一般情況下文字內容不確定多少就不能設定固定高度，所以一般不能設定「.container」高度(當然能確定內容多高，這種情況下「.container是可以設定乙個高度即可解決覆蓋問題。
2、要麼清除浮動。
好了，就暫時到這裡，明天再來將清除浮動的問題吧，廣州蚊子好多啊。
第67天 PyQuery 詳解
by 閒歡 跟安裝其他庫一樣 pip3 install pyquery安裝了之後，在程式裡面就可以引用了，引用方法跟其他庫類似 from pyquery import pyquery as pqpyquery 可以將 html 字串初始化為物件，也可以將 html 檔案初始化為物件，甚至可以將請求的...
Python學習第66天（css內外邊距）
今天聽這個css課程，感覺這個老師真的講的很爛，明明可以很輕鬆理解，非得扯上一堆的if什麼的，明明很容易就能理解，硬生生給我說懵了。內外邊距倒是蠻有意思的 內邊距，自然就是塊級標籤自己內部的一些距離，然後外邊距，就是標籤和同級標籤之間的距離 margin 用於控制元素與元素之間的距離 margin的...
python第25天 學習python第25天
今天是在尚學堂學習python第25天今天學習了使用者管理，許可權管理 使用者管理 1.使用者的登入與退出 語法 mysql h hostname p port u username p dbname e h hostname 指定要連線mysql的主機名或者ip hostname就是具體的主機名或...