13 浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。如果有浮动找浮动元素的边，没有找父元素的边

none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动

作用：实现盒模型（元素）并排

ps：可以对多个盒子的父级元素设置display: inline-block；，也可以实现并排

注意：要浮动一起浮动，有浮动清除浮动

如果有浮动找浮动元素的边，没有找父元素的边

看一个例子

html

<div class="box1"></div>
<div class="box2"></div>
<span>路飞学城</span>

css

.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

结果：三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        #topBar a:hover {
            color: #fff;
            background-color: #ff6700;
        }

        .top_l {
            background-color: darkgreen;
            float: left;
            width: 600px;
            height: 40px;

        }


        .top_login {
            background-color: red;
            height: 40px;
            float: right;
        }
         .top_shop {
            background-color: yellow;
            height: 40px;
            float: right;
        }

   </style>
</head>
<body>
<div id="topBar">
    <div class="container">
        <div class="top_l">
            <a href="">小米商城</a>
            <span class="sep">|</span>
            <a href="">MIUI</a>
            <span class="sep">|</span>
            <a href="">小米商城</a>
            <span class="sep">|</span>
            <a href="">MIUI</a>
            <span class="sep">|</span>
            <a href="">小米商城</a>
            <span class="sep">|</span>
            <a href="">MIUI</a>
            <span class="sep">|</span>
            <a href="">小米商城</a>
            <span class="sep">|</span>
            <a href="">MIUI</a>
            <span class="sep">|</span>
        </div>
        <div class="top_shop">
            <a href="">购物车(<span class="shopCount">0</span>)</a>
        </div>
        <div class="top_login">
            <a href="">登录</a>
            <span class="sep">|</span>
            <a href="">注册</a>
            <span class="sep">|</span>
        </div>

    </div>
</div>

</body>
</html>

1. 浮动的四大特性：

　　1）浮动的元素脱标

　　2）浮动的元素互相贴靠

　　3）浮动的元素由”子围”效果

　　4）收缩的效果

1.1 浮动元素脱标

　　脱标：就是脱离了标准文档流，不在页面占位置

html
<div class="box1">小红</div>
<div class="box2">小黄</div>
<span>小马哥</span>
<span>小马哥</span>

css
.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。

原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

1.2 浮动元素互相贴靠

html

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

css

        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

效果发现：

　　如果父元素有足够的空间，那么3紧靠着2，2紧靠着1，1靠着边。
　　如果没有足够的空间，那么就会靠着1，如果再没有足够的空间靠着1，自己往边靠

1.3 浮动元素字围效果

　　可用于一个图片，旁边加上描述图片的文字。

html
<div>
        <img src="./images/企业1.png" alt="">    
    </div>
    <p>
        123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
    </p>

css
*{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }

效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。文字围绕着浮动元素。

1.4 浮动元素紧凑效果

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

html结构：
<div>
     alex
</div>

css样式：
div{
    float: left;
    background-color: red;
}

大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动。学好css，这3部分(display，浮动，定位)必须要会

2. 清除浮动

清除别人对我的浮动影响。

为什么要清除浮动？

　　在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。

子盒子浮动,会脱离标准文档流,它们不在页面上占位置,子内容撑不起父盒子的高度

看一个效果：

html：

<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

</div>
<div class="father2"></div>

css

*{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮动 父盒子一般不设置高度*/
        }
        .box1{
            width: 200px;
  
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动

清除浮动的四种方法

　　1）给父盒子设置高度

　　2）clear:both

　　3）伪元素清除法

　　4）overflow：hidden

2.1 给父盒子设置高度

它的使用不灵活，需要手动调整高度大小，比较麻烦。一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

*{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            height: 300px;

        }
        .box1{
            width: 200px;
  
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

2.2 clear：both

clear：意思就是清除的意思。

有三个值：

　　left：当前元素左边不允许有浮动元素

　　right：当前元素右边不允许有浮动元素

　　both：当前元素左右两边不允许有浮动元素

给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

清除浮动，必须是块元素! 一般用div

html

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
</div>

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

css

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;        
        }
        div{
            width: 400px;
        }
        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;

在浮动元素的后面加一个块级标签，设置属性clear：both；解决浮动带,来的影响，也称之为 “内墙法”

这种方法不常用。为什么呢？因为清除一次，需要添加div标签，结构冗余，太麻烦了。

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>

        .box1 {
            width: 200px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 200px;
            background: green;
            float: left;
        }

        .box3 {
            width: 400px;
            height: 300px;
            background: blue;
            float: left;
        }
        .header{
            width: 100%;
            height: 200px;
            background-color: #ff6700;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <div class="clear"></div>
    <div class="header">alex</div>
<br>

</body>
</html>

2.3 伪元素清除法(最常用) *****

　　给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix(约定俗成的名字)的类，然后设置

.clearfix:after{
            /*添加点。为啥呢？因为content必须要有内容才行*/
            content: ".";
            /*设置为块级标签*/
            display: block;
            /*设置高度为0是为了不显示点*/
            height: 0;
            /*清除浮动*/
            clear: both;
            /*不占位置*/
            visibility: hidden
        }

　　使用伪元素后添加content，本是行内元素，转换为块级元素。块级元素2侧再清除浮动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box1 {
            width: 200px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 200px;
            background: green;
            float: left;
        }

        .box3 {
            width: 400px;
            height: 300px;
            background: blue;
            float: left;
        }
        .header{
            width: 100%;
            height: 200px;
            background-color: #ff6700;
        }

        .clearfix:after{
            content:'.';
            clear: both;
            display: block;
        }


    </style>
</head>
<body>
<div class="father clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="header">
    alex
</div>
<br>

</body>
</html>

网页效果：两部分内容中间有一个点号

将点号的内容进行高度设为0，且不可见

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box1 {
            width: 200px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 200px;
            background: green;
            float: left;
        }

        .box3 {
            width: 400px;
            height: 300px;
            background: blue;
            float: left;
        }
        .header{
            width: 100%;
            height: 200px;
            background-color: #ff6700;
        }

        .clearfix:after{
            content:'.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }


    </style>
</head>
<body>
<div class="father clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="header">
    alex
</div>
<br>

</body>
</html>

2.4 overflow: hidden(常用) *****

overflow这个属性定义溢出元素内容区的内容会如何处理。。塌陷

没有下拉子盒子时可以使用，例如购物车有下拉子盒子就不可以使用，否则子盒子内容也会被隐藏。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .father {
            overflow: hidden;
        }

        .box1 {
            width: 200px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 200px;
            background: green;
            float: left;
        }

        .box3 {
            width: 400px;
            height: 300px;
            background: blue;
            float: left;
        }
        .header{
            width: 100%;
            height: 200px;
            background-color: #ff6700;
        }

    </style>
</head>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="header">
    alex
</div>
<br>

</body>
</html>

有五个值：

　　visible 默认值。内容不会被修剪，会呈现在元素框之外。

　　hidden 内容会被修剪，并且其余内容是不可见的。

　　scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

　　auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

　　inherit 规定应该从父元素继承 overflow 属性的值。

本文链接：https://www.cnblogs.com/Summer-skr--blog/p/11404483.html

13 浮动

1. 浮动的四大特性：

2. 清除浮动

2.1 给父盒子设置高度

2.2 clear：both

2.3 伪元素清除法(最常用) *****

2.4 overflow: hidden(常用) *****

13 浮动的更多相关文章

随机推荐

热门专题

目录导航