# 四、網頁排版技巧 Part I

前面都在談單欄式樣版型。這章節談多欄式的版型

## 4.26 Float 浮動定位技巧

* 因為 div 是 block 元素，自己會佔據一整行，所以不會並排在一起
* 需要用 float 屬性 `float: left`
* 希望元素可以並排在一起，就是使用 float 的好時機

麻煩老師過目我的 H4-26 作業練習了，謝謝老師 (已使用 CodePen 內建 css reset)

* <https://codepen.io/ayugioh2003/pen/mxzNRx>

想順便請問，如何讓每條邊線的視覺效果看起來一樣呢？

我在三欄都有設定 `border: 5px solid lightblue;`。 但它們並排的時候，在視覺效果上，border 的寬度會相加，顯得交接處的 border 看起來變得比較粗

如果我想讓它們每條邊線的視覺效果都一樣，難道只能每一欄個別設定 border 嗎？

我目前想到兩個可能的方法

一、或許能用 table 排版，這樣每條邊線就能都一樣 但似乎就無法用 float 排版了，對未來想要 RWD 的話可能不方便

二、使用 `box-shadow` 的話，並排處的邊線感覺還是看起來寬一點

```css
.col {
  float: left;
/*   border: 5px solid lightblue; */
  box-shadow: 1px 1px 10px lightblue, -1px -1px 10px lightblue;;
  padding: 10px 5px 30px 5px;
  text-align: center;
}
```

參考資料

* [陰影效果及光暈效果的 box-shadow](https://goo.gl/uRmKSG29)

## 4.27 使用 clear 清除浮動

* float 的好朋友，clear
* 在浮動完的 div 後面加 div.clearfix，css 設定 clear: both;

## 4.28 兩欄式、三欄式版面定位技巧

* 寬度要注意，不然會換行
* 可以用 Chrome 的開發者工具確認高度
* main 可以把三欄都包在一起，調整和 .footer 的距離

## 4.29 設計並排式選單

* 利用 ul li 排版
* float: left
* 增加高度
* display: block&#x20;

## 4.30 LOGO 與選單並排設計技巧

* 左邊 logo，右邊 list 選單
* .topmenu 關於我們 產品介紹 Q\&A

## 4.31 作業：設計一個三欄式版面，具有表頭表尾的版面吧！

麻煩老師過目我的 HW4-32 作業練習了，謝謝老師 (已使用 CodePen 內建 css reset) <https://codepen.io/ayugioh2003/pen/bvzxKM>

除了這章節教的內容外，我多添加了幾個東西到作業裡面 一個是頁內錨點，搭配 `scroll-behavior: smooth;` 會有滾動的感覺 彩蛋的部份使用了 YouTube Player API，控制影片的播放與暫停

## 第四章測驗

![第四章測驗](https://i.imgur.com/cRhNrmf.png)

## 4.32 其他常見 clear 清除浮動效果

在父元素新增偽元素

```css
.clearfix:after{
  content:'';
  display:table;
  clear:both;
}
```

* [\[css\] 自動對 float 的元素做 clear 動作: clearfix @ 長島冰茶的工程師筆記 :: 痞客邦 ::](http://wbkuo.pixnet.net/blog/post/97307618-\[css]-%E8%87%AA%E5%8B%95%E5%B0%8D-float-%E7%9A%84%E5%85%83%E7%B4%A0%E5%81%9A-clear-%E5%8B%95%E4%BD%9C%3A-clearfix)
* [css Table 布局 - display:table – WEB 前端開發 - 專注前端開發，關注用戶體驗](http://www.css88.com/archives/6308)
* [CSS 清除浮動各種方法 @ 桔子舖 :: 痞客邦 ::](http://jillyz.pixnet.net/blog/post/39054424-css%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95%E5%90%84%E7%A8%AE%E6%96%B9%E6%B3%95)
* [W3cplus | 清除浮動解決方案](https://www.w3cplus.com/solution/clearfloat/clearfloat.html)
* [Clearing a float container without source markup](http://www.positioniseverything.net/easyclearing.html) clearfix 制定的過程
* [CSS Clearfix 清除浮動 - kgl 's blog](http://kgl.idv.tw/2014/11/17/css-clearfix-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95/)
* [那些年我們一起清除過的浮動 - 層疊之美 - 清除浮動, 清除浮動方法, 閉合浮動, hasLayout,Block formatting contexts, 塊級格式化上下文, 僞元素清除浮動 雲路科技](http://www.iyunlu.com/view/css-xhtml/55.html) 大推，提出 BFC 解釋
* [對 overflow 與 zoom” 清除浮動” 的一些認識 « 張鑫旭 - 鑫空間 - 鑫生活](http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/)
* [理解 CSS 中 BFC\_CSS, BFC 教程\_w3cplus](https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html)
* [如何理解 CSS 的 display 屬性\_CSS 教程\_w3cplus](https://www.w3cplus.com/css/how-well-do-you-know-display.html)