web.jpeg
1. 文檔流
- 文檔流在網頁的底層，表示的事一個網頁的位置
- 我們創(chuàng)建的元素默認都是處在文檔流中
- 文檔流的主要特點表現為
塊級元素和- 塊級元素
1.會
獨占一行，自上向下排列2.默認的寬度是100% 3.默認的高度是內容的高度
- 行內元素
1.不會獨占一行，根據內容的決定寬度 2.高度和寬度都是被內容撐開的
2.浮動 float
浮動的產生就是為了，解決塊級盒子不在一行顯示的情況
- 1.浮動
脫離文檔流的，原來還在文檔流的元素，會向上移動 - 元素浮動以后，會盡量向頁面的左上或是右上漂浮，直到遇到
父元素的邊框或者其他元素的浮動元素
- 元素浮動以后，會盡量向頁面的左上或是右上漂浮，直到遇到
- 如果浮動的元素上邊是一個沒有浮動的塊級元素，則浮動的元素不會超過塊級元素
- 4.浮動的元素不會超過上邊的兄弟元素
- 浮動會更改元素的顯示方式 :
inline-block
- 浮動會更改元素的顯示方式 :
脫標.png
浮動文字饒邊.png
3.浮動中高度塌陷
<style>
.box{
border: 10px solid yellowgreen;
}
.sun{
width: 100px;
height: 100px;
background-color: burlywood;
float: left;
}
.box2{
height: 200px;
width: 300px;
background-color: aquamarine;
}
</style>
<body>
<div class="box">
<div class="sun"></div>
</div>
<div class="box2"></div>
</body>
image.png
在標準流中，子元素是可以撐開父元素的，但是上圖中我們看到，
子元素浮動脫離標準流，使得父元素的高度為0，就是高度塌陷
3.1消除浮動帶來的負面影響
方式一 開啟BFC
在開發(fā)中，元素的塌陷會導致布局的變化，所以要避免這個情況，要清除浮動, 其實在頁面中的元素都一個隱含的屬性叫做:
Block Formatting Context簡稱：BFC
BFC有如下特點:
1.父元素的外邊距不會和子元素重疊
2.開啟BFC的元素不會被浮動元素覆蓋
3.開啟BFC的元素可以包含浮動的子元素
如何開啟
BFC?
我們只能間接的開啟比如 ：
1.設置元素的浮動-使用這個方式，雖然可以撐開父元素，但是父元素的顯示方式變化 inline-block，導致父元素的寬度丟失
2.設置元素的絕對定位
3.設置元素為inline-block
4.overflow:auto給父元素添加這個屬性,這個影響比較?。ǖ窃诙ㄎ坏臅r候就有影響）
所以
image.png
image.png
方式二 插入一個新的標簽使用clear屬性
<style>
.box1 {
border: 3px solid yellowgreen;
}
.sun1{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.sun2{
width: 200px;
height: 200px;
background-color:rebeccapurple;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: red;
}
.clear{
clear: both;
}
</style>
image.png
image.png
方式三 使用偽元素
使用偽元素的原理和 插入新的標簽是一樣的，不過使用偽元素，界面代碼中不顯示，插入的標簽，提高代碼的可讀性
<style>
.box1 {
border: 3px solid yellowgreen;
}
.sun1{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.sun2{
width: 200px;
height: 200px;
background-color:rebeccapurple;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: red;
}
.clearfix:after{
/* 添加一個內容空白的 */
content: "";
/* 轉化為塊級元素 */
display: block;
/* 設置元素是否顯示 */
visibility: hidden;
/* 高度為0 */
height: 0;
/* 行高為0 */
line-height: 0;
/* 清楚 */
clear: both;
}
.clearfix{
/* 兼容ie67瀏覽器 */
*zoom: 1;
}
</style>
<body>
<div class="box1 clearfix">
<div class="sun1"></div>
<div class="sun2"></div>
</div>
<div class="box2"></div>
</body>
image.png
雙偽元素清楚浮動
<style>
.clearfix:before, .clearfix:after {
content: "";
display: block; /* 觸發(fā)BFC 防止外邊距合并 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
- 清除浮動
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
