CSS布局(1)---浮动布局之float用法

本文是对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的行内元素会在行内元素的下方显示。

遇到的问题

1. 使用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.

1. 将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元素在宽度满足的情况下会形成一行。