本文是对https://www.cnblogs.com/zcy_soft/archive/2011/02/12/1952513.html
的一些总结思考。
准备知识
HTML中的元素分为块级(block)元素和内联(inline)元素。
1.块级(block)元素
- 总是独占一行,且其后的元素也必须是独占一行
- 宽度(width),高度(height),内边距(padding)和外边距(margin)都是可以控制的
- 块级元素主要有:address ,center ,div , dl , form , h1~6, hr , menu , ol , p , table , ul , li
2.内联(inline)元素
- 与相邻的内联元素在同一行
- 宽度(width),高度(height),内边距的(padding-top/padding-bottom)和外边距的(margin-top/margin-bottom)都是不可改变的
- 块级元素主要有:a , abbr , b , bdo , big , br , cite , code, em , font , i , img , input , kbd , label , q , s , select , small , span , strong , sub , sup
- 内联元素的padding-left/padding-right和margin-left/margin-right是可以控制的,所以内联元素的宽度是可以控制的
- 内联元素的内部可以放置块级元素,所以可以通过块级元素来控制内联元素的高度。
3.利用CSS摆脱HTML中标签的限制,主要使用的CSS样式有:
- display:block——-将标签设置为块级元素
- display:inline——-将标签设置为内联元素
- display:inline-block—–将标签设置为内联块级元素,主要目的是为同行显示并可以修改宽高内外边距等所需要的属性。eg:将ul元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。
float属性详解
属性 | 描述 |
---|---|
float:left | 元素向左浮动 |
float:right | 元素向右浮动 |
float:none | 元素不浮动 |
float:inherit | 元素继承父元素的浮动属性 |
浮动的特性
- 文档内容的宽度决定了浮动元素的宽度
- 排在一排。档元素设置float属性后,元素也就具备了inline-block属性,即该元素呈现为内联元素,不再独占一行,后面的元素在满足宽度的情况下与其排成一行,一行满了自动换行。
- 提升元素层级。当元素被设置float属性之后,其他元素就会无视这个元素的存在,但是其他元素会为该元素让出位置,环绕在四周。
浮动对后面元素的影响
1.设置了float的块级元素
1) 若后面跟着块级元素,会发生图层重叠,float元素位于最上层,后面块级元素内文档依然会为float元素让出位置。
2) 若后面跟着内联元素,内联元素回根据自身文档特点决定是否进行文字环绕。
2.设置了float的内联元素
1) 若后面跟着块级元素,若给行内元素设置的宽高,则会显示出来,发生图层重叠,行内元素位于最上层,块级元素文档会为行内元素让出位置。若行内元素未设置了宽高,则块级元素会在行内元素的下方显示。
2) 若后面跟着行内元素,若给float行内元素设置的宽高,则会显示出来,未设置浮动float的会根据自身文档特点觉得是否进行文字环绕。若行内元素未设置了宽高,则未设置float的行内元素会在行内元素的下方显示。
遇到的问题
- 使用float:right后内容下移换行
CSS:
#navigation{
float: left;
height: 200px;
width: 100px;
background-color: red;
}
#wrapper{
height: 200px;
background-color: green;
}
#extra{
float: right;
height: 200px;
width: 100px;
background-color: blue;
}
HTML:
<main>
<div id="navigation">NAVIGATION</div>
<div id="wrapper">WRAPPER</div>
<div id="extra">EXTRA</div>
</main>
原因:当非float元素和float元素在一起的时候,如果非float元素在前,那么float的元素将被排斥。由于float元素会被其他元素无视,但是会为float元素让出位置,所以当#navigation设置为float:left的时候,#wrapper会无视#navigation元素,但会让出位置,并且由于#wrapper是块级元素,它会将一行占满,所以#extra就会出现在下一行了。
解决方法:
1. 将#extra放在#wrapper前面
HTML:
<main>
<div id="navigation">NAVIGATION</div>
<div id="extra">EXTRA</div>
<div id="wrapper">WRAPPER</div>
</main>
原因:float:right会先占据位置,将剩下的位置留给块级元素#wrapper.
- 将wrapper也加上浮动属性
CSS:
#navigation{
float: left;
height: 200px;
width: 100px;
background-color: red;
}
#wrapper{
float: left;
height: 200px;
background-color: green;
}
#extra{
float: right;
height: 200px;
width: 100px;
background-color: blue;
}
原因:float元素在宽度满足的情况下会形成一行。