浮动

最新推荐文章于 2024-04-06 19:43:20 发布

pick豆子

最新推荐文章于 2024-04-06 19:43:20 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/qq_42964711/article/details/105904593

版权

网页布局三种方式

标准流

标准流：按照默认方式排列，快内元素行内元素按照规定排列
1.块内元素占一行
常用：div hr p ul ol
2.行内元素：一行放好多个
常用：span a i em

浮动

为什么不用标准流的行内块？

有空隙。一些特效无法实现。
解决方法：浮动
浮动适用于：一行放多个块。

什么是浮动？

浮动用于创建浮动框。一个贴着另一个边缘。
浮动特性：
1.浮动元素会脱离标准流。
浮动元素脱离位置
原位置被标准流占用（会出现叠加效果。想象成没有浮动元素之后的位置）
2.有了宽高
行内元素加上浮动有了行内框的特点。
块级元素加上浮动也有了行内块特性。如果没有宽度，宽度等于其父亲。
这样都可以有宽高。
3.布局
防止不以浏览器为准
背景用一个标准流父盒子父盒子里放float浮动
这样float受父盒子约束。

布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: plum;
        }
        .right {
            float: right;
            width: 992px;
            height: 615px;
            background-color: powderblue;
        }
        /* 大于表示只包括亲儿子 */
        .right>div {
            float: left;
            background-color: pink;
            width: 234px;
            height:300px;
            //不用考虑右面的了
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
    
</head>
<body>
    <div class="box">
        <div class="left">zuo</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>
</html>

常见的网页布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清楚内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            height: 50px;
            background-color: grey;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            /* 上下10px 居中 */
            margin: 10px auto;
        }
        li {
           list-style: none;
        }
        .box {
            width: 980px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        .box li {
            float: left;
            /* 左边距 */
            margin-right: 10px;
            width: 237px;
            height: 300px;
            background-color: gray;
        }
        /* 去掉最后一个边距 */
        .box .last {
            margin-right: 0;
        }
        /* 只要和浏览器一样宽，不用设定宽 */
        .footer {
           height: 200px;
           background-color: grey;
           margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer"></div>
</body>
</html>

浮动布局注意点

1.先用标准流父元素，否则会随浏览器浮动。
2.一个元素浮动了，兄弟元素也会浮动。
3.第一个儿子没浮动，第二个儿子浮动了。
则二儿子不会覆盖大儿子，会紧贴着大儿子，三儿子跑上去压住二儿子。只会影响后面的，不会影响前面的标准流。

所有父盒子都有高度吗？

不应该父盒子高度，让父盒子高度随子孩子高度变化而变化

为什么清除浮动？

首先父盒子不能有固定高度。
由于父级盒子很多情况下，不方便给高度，但是盒子浮动不占位置，最后父盒子高度为0时，就会影响子盒子。
由于浮动不再占有原文档位置，所以会对后面标准流元素排版产生影响。

清楚浮动本质。

清楚浮动之后，父亲就会随着浮动子盒子自动检测高度。父亲有了高度，就不会影响下面标准流了。

清除浮动方法

1.额外标签法–隔墙法
优点：通俗易懂
缺点：添加无意义标签

f{
clear:both
}

<div="f"> </div>

2.父亲添加overflow
还可以清楚外边距
优点：书写简单
缺点：无法解除盒子溢出。

//box是父亲
.box {
   over flow:hidden
  }

3. 父级after伪元素
优点：结构语义正确
缺点：兼容性问题 IE6 7不支持

   .clearfix:after {
      //after必须有content属性
      content: "";
      //必须转化成块元素，因为默认为行内元素
      display: block;
      
      clear fix {
      //IE 6 7专有
      *zoom :1;
      }

4. 父级双伪元素清除
在前后插入俩个盒子
优点：结构语义正确
缺点：兼容性问题 IE6 7不支持

    .clearfix:before,
    .clearfix:after {
      content: "";
      display table;
    }
    .clearfix:after {
      clear:both;
     }
    .clearfix {
      *zoom 1;
      }
   
   父盒子加个名class="clearfix"