布局介紹
目錄本例中，body就是外層容器，因為它預設就是100%的網頁寬度，所以不用給它新增新的樣式。在body內部，整個網頁的內容放在了container容器裡面，也就是內層容器。對於內層容器，需要設定乙個max-width，並將外邊距設定為auto，使內容居中，如下**
.container浮動元素不同於普通文件流的元素，它們的高度不會加到父元素上。這可能看起來很奇怪，但是恰好體現了浮動的設計初衷。解決的辦法是使用跟浮動配套的clear屬性。將乙個元素放在主容器的末尾，並對它使用clear，這會讓容器擴充套件到浮動元素下面。
但是這種方式**。要在html裡面新增不必要的標記，用純css方案來實現相同的而效果
不用額外的div標籤，我們還可以用偽元素來實現。使用::after偽元素選擇器，就可以快速地在dom中在容器尾部新增乙個元素，而不用在html裡新增標記。
如下所示：
.clearfix::after這個清除浮動還有個問題沒解決：浮動元素的外邊距不會摺疊到清除浮動容器的外部，非浮動元素的外邊距則會正常摺疊。比如在前面的頁面裡，標題「running tips」緊挨著main元素的頂部，它的外邊距在容器外面摺疊了。
一些開發人員跟喜歡使用清除浮動的乙個修改版，它能包含所有的外邊距。這樣更符合預期。使用這個修改版，能防止標題外部的外邊距在main元素的外部摺疊。
.clearfix::before,
.clearfix::after
.clearfix::after
清除浮動和display:table
在清除浮動時使用display:table能夠包含外邊距，是因為利用了css的一些特性。建立乙個display:table元素，也就是在元素內隱式建立了乙個**行和乙個單元格。而且clear屬性只能對塊級元素生效。**是塊級元素。
眾多的元素浮動到同一側，如果每個浮動盒子的高度不一樣，最後的布局可能 千變萬化。同理，改變瀏覽器的寬度也會造成相同的結果，因為它會導致換行，從而改變元素高度。而我們真正想要的是每行有2個浮動盒子。
要想修復這個問題很簡單：清除第三個浮動元素上面的浮動。更 通用的做法是，清除每行的第乙個元素上面的浮動。由於每行有2個盒子，所以只需要清除每行的第奇數個元素上面那行的浮動即可。你可以用:nth-child()偽類選擇器來選中這些目標元素。
.media:nth-child(odd)例子中，每個media塊裡面，發現它的盒子擴充套件到了最左邊，因為它會包圍浮動的 。現在文字圍繞著，但是只要清除了底部的浮動，正文就會立刻移動到**盒子的左邊。而我們真正想要的是將正文的左側靠著浮動的右側排列。
為了實現這種布局，需要為正文建立乙個塊級格式化上下文（bfc）。bfc是網頁的一塊區域，元素基於這塊區域布局。雖然bfc本身是環繞文件流的一部分，但它將內部的內容與外部的上下文 隔離開。這種隔離為建立bfc的元素做出了以下3件事情：
包含了內部所有元素的上下外邊距
包含了內部所有的浮動元素
不會跟bfc外面的浮動元素重疊。
簡而言之，bfc裡的內容不會跟外部的元素重疊或者相互影響。如果給元素增加clear屬性，它只會清除自身所在bfc內的浮動。如果強制給乙個元素生成乙個新的bfc，他不會跟其他bfc重疊。
給元素新增以下的任意屬性值都會建立bfc.
float:left或者right，不為none即可。
overflow:hidden、auto或scroll，不為visible即可。
display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。擁有這些屬性的元素稱為塊級容器。
position:absolute或position:fixed。
例子中只要給**正文建立bfc，網頁的布局就會符合預期。通常是給元素設定overflow值-hidden或者auto。
使用overflow:auto通常是建立bfc最簡單的一種方式。也可以前面提到的其他方式：但是有些問題需要注意，比如，使用浮動或inline-block方式建立bfc的元素寬度變成100%，因此需要限制一下元素的寬度，防止因為過寬而換行，導致內容移動到浮動的下面，相反，使用table-cell方式顯示的元素，其寬度只會剛好容納其中的內容，因此需要設定乙個較大的寬度，強制使其填滿剩餘空間。
說明：某些情況下，bfc中的內容可能還會與別的bfc的內容重疊。比如，內容溢位了容器或者因為負外邊距導致內容被拉到容器下面。
如下**，為例子中的**
html**如下
strength
strenth training is an important part of injury prevention.focus on your core--especially your abs and glutes.
strength
strenth training is an important part of injury prevention.focus on your core--especially your abs and
glutes.
strength
strenth training is an important part of injury prevention.focus on your core--especially your abs and
glutes.
strength
strenth training is an important part of injury prevention.focus on your core--especially your abs and
glutes.
:root
*,::before,
::after
body
body *+*
header
.container
.main
.media
.media-image
.media-body
.media-body h4
.clearfix::before,
.clearfix::after
.clearfix::after
.media:nth-child(odd)
css布局簡單介紹
一，左右布局有一下幾種方式 1，float 2，position 3，flex 4，grid 主要介紹下grid。舉一下例子 twothree four five display grid grid template columns 50 50 grid template rows 50px 60p...
CSS布局學習
css 規定的定位機制有三種 標準文件流 normal flow 浮動 floats 絕對定位 absolute positioning 標準文件流 normal flow 特點 1.從上倒下，從左到右，輸出文件內容 2.有會計元素和航跡元素組成。塊級元素 特點 1.從左到右撐滿頁面，獨佔一行 2....
學習css布局
1 display block inline 塊級元素，行內元素 包裹一些文字，不會打亂布局 2 main 設定自動居中 左右外邊距 main 3 盒子模型 margin padding border content 設定 box sizing border box後，元素的內邊距和邊框不會再改變元...