###### tags: `HTML`
# float / clear fix

# float 指定位置-->浮動(重疊)區塊
為解決 inlinkblock 只能不換行 無法調整圖文位置
發明 float 依舊不換行 但可以把圖丟到指定方向(右)
float 讓物件飄起來

- float right
* 若設為右邊, 無論如何縮放畫面 會讓物件維持在右側
不會因版面縮小而自動向下換行

- float left和預設的left差異
* float left的圖會飄在框架上方(重疊), 所以框架會維持原有的文字內容大小
* 預設的left若圖大於框, 會把框撐到和圖一樣大

- 框架比圖片小時
* 比較暴力的方法 : padding-bottom / br*N /設height or width等 撐開版面
缺點 : 可能會因為圖片或文字的更新需要重新更改設定
但是有些狀況還是可以拿來應用

* 比較簡單的方法 : 在框架裡的style > overflow: auto;
(overflow: auto 會自動控制到margin和padding)讓文字與圖片置於同一層和區塊

# CSS::after選擇器
before=前 / after=後
- 某標籤::after/before
例:.classname::after{content:"";}

在某class後面執行content空值

# clearfix(清除浮動)
<pre>
.clearfix::after {
content: "";
clear: both;
display: table;
}
</pre>
為避免不對稱問題 通常clear只用 both
clear both 清除左右兩邊float
clear right 清除左邊float
clear left 清除右邊float

# content
content:""; = 加空值, 用空白內容顯示區塊
沒content=0, 有content=不是0
0 * 任何數=0, 有content*N=0以上, 才可以賦值上去(即存在)

# float vs clear
一般來說float / clear是成對出現, 少一個就跑版(破圖)
1. 用float指定圖片位置並浮動在區塊上
2. 再用clear清除float的浮動 使其只有指定位置功能 避免破圖(圖超出框)

https://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do
- 差異
* 語法不同
* clearfix::after 後段多一個 ::after 偽元素

- float特性
對齊 靠上排版

- clear
斷行 對稱 收尾

# clear=斷行, 選擇斷 外面(容器) 還 裡面(物件)
用運clear作為float的斷句(換行)
- flexbox-container 外面容器
<pre>
.cl{clear-fix::after} 在外面div的尾巴斷行
< div class="cl">
img
< /div>
</pre>

- flex-item 裡面物件
<pre>
img{float:left} 給所有img設float
.cl{clear: both;} 給一個div(item)設clear:both

img
img
< div class="cl" ></ div> 在這裡div帶有clear:both所以把img的float斷行
img
</pre>

# display:table 是什麼?
what methods of 'clearfix' can I use?

clear-fix container

content:""
clear:both
display:block

MDN css float clear

# 下午

- FLOAT/特殊排版:要自己算間距調整
優點:因為都是自己設定,所以比較多設定的調整用法

float靠右
container換行

- FLEXBOX/置中對齊對稱 自動排列
缺點:較難調整細部微調

* 這兩者盡量不要混用
* 同一層不要用不同的
* 不同層可以不同 但一般不太會用到

- TABLE 較舊的用法

# 22/5/12

# 複習昨日總結
- float~clear
clear分兩種置放
1.容器 2.物件

- flebox

- 特殊排版
* table
* Display : inline block inlineblock

框架不夠的部分也可以自行設高度50vh

區塊切割用float時切割左右時 可以用width:50% 給左右直接均等切割分配

程式碼第一天 進度1% 就放正式/測試站
追蹤狀況,保持隨時了解是否異常,在除錯上較為方便

因為螢幕的關係
網頁世界的設定通常可以在寬度用%
高度不設值或用vh

# JS

- console-log js幫助測試
- alert 提示使用者

- 單引雙引號 同PHP字串
" " , ' '

js的位置
通常因為讀取的關係
會習慣把js script 放在body前

js head

condition=條件

最後一個影片從12:20開始