css浮动

news2024/11/25 0:37:35

浮动的顺序贴靠特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
      .box{
        width: 250px;
        height: 100px;
        border: 1px solid #000;
      }
      .box .c1{
        width: 150px;
        height: 100px;
        background-color: orange;
        float: left;
      }
      .box .c2{
        width: 100px;
        height: 50px;
        background-color: green;
        float: left;
      }
      .box .c3{
        width: 100px;
        height: 50px;
        background-color: blue;
        float: left;
      }
    </style>
</head>
<body>
  <div class="box">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
</body>
</html>

浮动的元素一定要设置宽高，不需要再区分行内，行内块，块元素了

使用浮动实现网页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 1000px;
            height: 100px;
            /*第一步*/
            /*background-color: #333;*/
            margin: 0 auto;
        }
        .content{
            width: 1000px;
            height: 500px;
            margin: 20px auto;
            /*第二步*/
            /*background-color: #333;*/
        }
        footer{
            width: 1000px;
            height: 100px;
            margin: 0px auto;
            background-color: #333;
        }
        header .logo{
            float: left;
            width: 220px;
            height: 100px;
            background-color: orange;
        }
        header .login{
            float: right;
            width: 220px;
            height: 30px;
            background-color: orange;
        }
        header nav{
            float: right;
            width: 660px;
            height: 50px;
            background-color: green;
            margin-top: 20px;
        }
        .content .ad{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(9,141,182);
        }
        .content main{
            float: right;
            width: 680px;
            height: 500px;
            /*第三步*/
            /*background-color: rgb(162,14,221);*/
        }
        .content main .banner{
            width: 680px;
            height: 380px;
            background-color: orange;
        }
        .content main .pics{
            width: 680px;
            height: 100px;
            margin-top: 20px;
            /*第四步*/
            /*background-color: orange;*/
        }
        .content main .pics ul{
            list-style: none;
        }
        .content main .pics ul li{
            float: left;
            width: 160px;
            height: 100px;
            background-color: blue;
            margin-right: 10px;
        }
        .content main .pics ul li:last-child{
            width: 170px;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo"></div>
        <div class="login"></div>
        <nav></nav>
    </header>
    <section class="content">
        <aside class="ad"></aside>
        <main>
            <div class="banner"></div>
            <div class="pics">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </main>
    </section>
    <footer></footer>
</body>
</html>

清除浮动方法

1.父元素添加overflow:hidden

2.父元素添加类标签clearfix

.clearfix::after {
            content: '';
            clear: both;
            /* 转为块级元素 */
            display: block;
        }

3.一个盒子不浮动的话之前添加一个盒子设置 height:20px;clear:both;

4.直接给该盒子添加margin-top:20px;clear:both;不建议使用

BFC规范

BFC（块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

例子：当一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动2</title>
    <style>
      .box{
        width: 400px;
        border: 10px solid #000;
      }
      .box .c1{
        float: left;
        width: 200px;
        height: 200px;
        background-color: orange;
      }
      .box .c2{
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
</head>
<body>
  <div class="box">
    <div class="c1"></div>
    <div class="c2"></div>
  </div>
</body>
</html>

效果如左下图

方法一和三方法可行，但相对不靠谱，比较常用方法二加绝对定位和方法四

.box{
        width: 400px;
        border: 10px solid #000;
        position: absolute;
      }

添加了绝对定位后，效果如右上图所示

方法四的作用：溢出盒子边框的内容将被隐藏，但是盒子的padding部分的溢出还在

BFC的其他作用

BFC可以取消盒子margin塌陷

BFC可以阻止元素被浮动元素覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决margin的塌陷</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 50px;
        }

        div {
            overflow: hidden;
        }

        .s1 {
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .s2 {
            /*实战不建议这么做，还是选择都浮动比较好，虽然效果相同*/
            overflow: hidden;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>
    <p></p>
</div>
<div>
    <p></p>
</div>

<section class="s1"></section>
<section class="s2"></section>
</body>
</html>

定位

相对定位：导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 960px;
            height: 40px;
            margin: 40px auto;
            /*border: 1px solid #000000;*/
        }

        nav ul {
            list-style: none;
        }

        nav ul li {
            float: left;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        nav ul li a {
            display: block;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-decoration: none;
            color: white;
        }

        nav ul li a:hover {
            border-top: 3px solid red;
            position: relative;
            top: -3px;
            background-color: gold;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="">网站栏目</a></li>
        <li><a href="">网站栏目</a></li>
        <li><a href="">网站栏目</a></li>
        <li><a href="">网站栏目</a></li>
        <li><a href="">网站栏目</a></li>
        <li><a href="">网站栏目</a></li>
        <li><a href="">网站栏目</a></li>
        <li><a href="">网站栏目</a></li>
    </ul>
</nav>
</body>
</html>

绝对定位脱离标准文档流 脱离标准文档流的方法：浮动、绝对定位、固定定位

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖

z-index设置优先级覆盖添加绝对定位可以给行内元素设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位的用途</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .carouse1{
        width: 650px;
        height: 360px;
        border: 1px solid #000;
        margin: 40px auto;
        position: relative;
      }
      /*共性*/
      .carouse1 .btn{
        /*给a标签设置绝对定位也可以设置宽高度*/
        /*绝对定位因为按钮压在图片上面*/
        position: absolute;
        width: 40px;
        height: 40px;
        border: 1px solid #000;
        /*从个性提取上来*/
        top: 50%;
        margin-top: -20px;
        /*圆形*/
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        background-color: rgba(255,255,255,.5);
        /*鼠标为小手*/
        cursor: pointer;
        font-family:Consolas;
        font-size: 26px;
      }
      .carouse1 .btn:hover{
        background-color: gold;
        color: white;
      }
      /*个性*/
      .carouse1 .leftbtn{
        left: 10px;
      }
      /*个性*/
      .carouse1 .rightbtn{
        right: 10px;
      }

      .carouse1 ol{
        position: absolute;
        width: 120px;
        height: 20px;
        right: 20px;
        bottom: 20px;
        /*background-color: green;*/
        list-style: none;
      }
      .carouse1 ol li{
        float: left;
        width: 20px;
        height: 20px;
        /*background-color: gold;*/
        background-color: rgba(255,255,255,.5);
        /*变为圆形*/
        border-radius: 50%;
        margin-right: 10px;
      }
      .carouse1 ol li.current{
        background-color: gold;
      }
    </style>
</head>
<body>
    <div class="carouse1">
      <img src="images/0.jpg" alt="">
      <a class="leftbtn btn">&lt;</a>
      <a class="rightbtn btn">&gt;</a>
      <ol>
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
</body>
</html>
</html>