【CSS基础学习笔记】浮动float、清除浮动

CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)∶普通流(标准流)、浮动、定位。

标准流就是标签按照规定好默认方式排列。

浮动可以改变元素标签默认的排列方式。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动（float）

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：选择器 { float: 属性值;}（属性值取值有：none、left、right）

加了浮动之后的元素,会具有以下特性：

1. 浮动元素会脱离标准流(脱标)移动到指定位置，浮动的盒子不再保留原先的位置（会浮在页面上，覆盖标准流的盒子，但只会影响浮动盒子后面的标准流，不会影响前面的标准流）。

2. 浮动的元素会一行内显示并且元素顶部对齐。（如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列）

3. 浮动的元素会具有行内块元素的特性。

网页布局第一准则：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
​
网页布局第二准则：先设置盒子大小,之后设置盒子的位置。

清除浮动

清除浮动元素脱离标准流造成的影响。

• 如果父盒子本身有高度，则不需要清除浮动。

• 父级盒子不方便给明高度时，让子盒子撑开。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。（制作footer时也要清除上面盒子的浮动，否则footer的盒子会因为浮动被盖住）

语法：选择器 {clear: 属性值;} （取值有left清除左侧、right清除右侧、both两边都清除）

额外标签法：在最后一个浮动盒子末尾添加一个空的块级元素标签。例如<div style="clear: both"></div>，或者其他标签（如 <br/>等）。

父级添加overflow：可以给父级添加overflow属性，将其属性值设置为hidden（常用）、auto或 scroll 。（缺点是无法显示溢出的盒子）

:after伪元素法：在最后一个浮动盒子末尾添加一个新的盒子。（常用）

<div class="box clearfix">
    <div class="box1">子盒子1</div>
    <div class="box2">子盒子2</div>
</div>
/*使用:after伪元素法清除浮动*/
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}
.box {
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}

双伪元素清除浮动：给父元素在前后都增加新盒子。

<div class="box clearfix">
    <div class="box1">子盒子1</div>
    <div class="box2">子盒子2</div>
</div>
/*使用双伪元素清除浮动*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.box {
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}

CSS属性书写顺序：布局、自身属性、文本属性、其他

页面布局：

1. 先确定页面的版心

2. 分析页面中的行模块，以及行模块中的列模块

3. 一行中的列模块常用浮动布局，先确定列的大小再确定位置

4. 先写结构再写样式

在实际开发中，不会直接使用链接a，而是用li包含链接（li+a）的办法。

<!--导航栏-->
<div class="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">个人中心</a></li>
    </ul>
</div>

CSS设置中的百分之几

width、height：是基于父元素 width 和 height 的百分之几。width = 50%，宽度是父元素宽度的50%。

margin：基于父对象width 和 height的大小。margin-left = 50%，则其左外边距为父元素宽度的50%。

padding：基于父对象width 和 height的大小。padding-left = 50%，则其左内边距为父元素宽度的50%。

transform：transform: translate(50%, 0%) 百分比值是基于元素本身 width 和 height。

快捷键：ctrl+g 跳转到指定行