css浮动布局-float

什么是浮动？

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄

实例

<div class="main">
    <div class="box"></div>
    <div class="box"></div>
</div>
<style>
    .box{
        float: left;
    }
</style>

浮动原理

div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流

代码

<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<style>
    div {height: 50px;}
    .box1{width: 300px; background: red;}
    .box2{width: 200px; background: green;}
    .box3{width: 300px; background: yellow;}
    .box4{width: 200px; background: blue;}
</style>

结果

要在一行显示多个div，就需要脱离文档流，这就需要使用float浮动；

代码

<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<style>
    div {height: 50px;}
    .box1{width: 300px; background: red;}
    .box2{width: 200px; background: green;float: left;}
    .box3{width: 300px; background: yellow;}
    .box4{width: 200px; background: blue; float: right;}
</style>

结果

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流在不同的层次中

左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列

css清除浮动

在使用float浮动后，浮动会给整个HTML布局带来一定的影响，所以必须要清除浮动

clear属性

浮动会给整个HTML布局带来一定的影响，所以必须要清除浮动

属性值

• none ：默认值。允许浮动元素出现在左右两侧
• left ：在左侧不允许浮动元素
• right ：在右侧不允许浮动元素。
• both ：在左右两侧不允许浮动元
• inherit ：继承父元素的clear属性值。

clear只对本身起作用

实例

<div class="main">
    <div class="box"></div>
    <div class="box"></div>
</div>
<div style="clear:both;"></div>
<style>
    .box{
        float: left;
    }
</style>

overflow属性

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，可在浮动元素的父级添加样式overflow:hidden;

属性值

• visible ：默认值。内容不会被修剪，会呈现在元素框之外，不剪切也不添加滚动条
• auto ：不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动
• hidden ：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷 的功能
• scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

实例

<div class="main">
    <div class="box"></div>
    <div class="box"></div>
</div>

<style>
    .main{overflow: hidden;}
    .box{
        float: left;
    }
</style>

使用：after

为了减少空标签的多余，可采用给父级的伪元素进行样式清除浮动

实例

<div class="main">
    <div class="box"></div>
    <div class="box"></div>
</div>

<style>
    .main::after{
        display: block;
        content: "";
        clear: both;
    }
    .box{
        float: left;
    }
</style>