---
# System prepended metadata

title: float / clear fix
tags: [HTML]

---

###### 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開始

