1、標準文件流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素預設的排列方式
組成：塊級元素（block）
…、
、
內聯元素（inline）
2、display屬性：
block 塊級元素的預設值，元素會被顯示為塊級元素，該元素前後會帶有換行符
inline 內聯元素的預設值。元素會被顯示為內聯元素，該元素前後沒有換行符
inline-block 行內塊元素，元素既具有內聯元素的特性，也具有塊元素的特性
none 設定元素不會被顯示；
可以使用什麼屬性使塊元素排在一行？
inline-block
float
3、float屬性：
Left 元素向左浮動
Right 元素向右浮動
None 預設值。元素不浮動，並會顯示在其文字中出現的位置
4、clear 屬性：
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左、右兩側不允許浮動元素
none 預設值。允許浮動元素出現在兩側
5、*解決父級邊框塌陷的方法
clear屬性可以清除浮動對其他元素造成的影響，可是依然解決不了父級邊框塌陷問題，怎麼辦？
浮動元素後面加空div
設定父元素的高度
父級新增overflow屬性
父級新增偽類after
overflow屬性：
visible 預設值。內容不會被修剪，會呈現在盒子之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示捲軸以便檢視其餘內容
auto 如果內容被修剪，則瀏覽器會顯示捲軸以便檢視其餘的內容
6、上示例
<！DOCTYPE html>
*{
padding： 0px；
margin： 0px；
}
a{
text-decoration： none；
color： #666666；
}
a：hover{
color：#e4393c；
}
。container{
width： 990px；
margin：0 auto；
}
h2{
float： right；
color： gray；
padding-top： 14px；
padding-right：700px；
}
。main_content{
height： 500px；
background-color： #e93854；
}
。main_content 。login{
height： 500px；
background： url（“。。/htmlSeven/img/banner。png”） no-repeat；
}
。main_content 。form{
width： 300px；
height： 300px；
box-sizing： border-box；
background-color： #fff；
float： right；
margin-top： 150px；
margin-right： 20px；
}
。main_content 。top{
line-height： 54px；
display： flex；
text-align： center；
background： url（“。。/htmlSeven/img/icon5。jpg”） 175px 20px no-repeat；
}
。main_content 。top a{
flex： 1；
font-size： 18px；
font-weight： 700；
}
。main_content 。top 。one{
font-size： 13px；
}
。form 。middle{
padding-top： 33px；
padding-left： 20px；
padding-right： 20px；
}
。form 。middle 。public{
width： 260px；
height： 38px；
margin-bottom： 20px；
padding-left： 50px；
box-sizing： border-box；
}
。form 。inputs {
position： relative；
}
。form 。middle span {
display： block；
width： 36px；
height： 36px；
border-right： 1px solid #ccc；
background-color： #f3f3f3；
position： absolute；
}
。form 。middle 。user_img {
top： 1px；
left： 1px；
background： url（“。。/htmlSeven/img/icon1。jpg”） no-repeat；
}
。form 。middle 。pwd_img {
top： 59px；
left： 1px；
background： url（“。。/htmlSeven/img/icon2。jpg”） no-repeat -2px 0px；
}
。inputs a {
float： right；
}
。inputs 。btn {
width： 100%；
height： 36px；
background-color： #e4393c；
color： #fff；
margin-top： 20px；
font-size： 20px；
text-align： center；
}
。footer {
text-align： center；
padding-top： 20px；
}
。footer a {
padding： 0 10px；
}
。footer 。copyright{
padding-top： 15px；
padding-bottom： 40px；
}
效果圖連結：
file：///D：/ruanjian/VS/wenjianxiangmu/htmlSeven/jingdongdenglu。html
相關推薦
