52 常见的网页布局 、浮动的两个注意点 、清除浮动

最新推荐文章于 2022-08-18 20:43:00 发布
最新推荐文章于 2022-08-18 20:43:00 发布
阅读量155 收藏 2
点赞数
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_sunny123/article/details/119349352
版权

一.常见的网页布局

在这里插入图片描述
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07常见的网页布局</title>
    <style>
        /* 清除内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 36px;
            background-color: #ecedf8;

        }

        .banner {
            width: 505px;
            height: 94px;
            background-color: #ecedf8;
            /* 让盒子居中显示 */
            margin: 10px auto;
            /* margin-top: 10px; */
        }

        .box {
            width: 502px;
            height: 175px;
            background-color: #ecedf8;
            margin: 0 auto;
            /* margin-top: 10px; */
        }

        /* 清除小圆点 */
        li {
            list-style: none;
        }

        .box li {
            float: left;
            width: 121px;
            height: 175px;
            background-color: pink;
            margin-right: 6px;
        }

        /* 清除最后一个小盒子的右边距 */
        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .footer {
            height: 125px;
            background-color: #ecedf8;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- .top+.banner+.box+.footer -->
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <!-- ul>li*4{$} -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

结果

在这里插入图片描述

二.浮动的两个注意点

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-浮动的两个注意点</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        li {
            list-style: none;
        }

        /* 如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示 */
        .box {
            height: 500px;
            background-color: palegreen;
            margin: 20px auto;
        }

        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

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

        .sanmao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

</head>

<body>
    <!-- .box>ul>li*3 -->
    <div class="box">
        <ul>
            <li class="damao">大毛</li>
            <li class="ermao">二毛</li>
            <li class="sanmao">三毛</li>
        </ul>
    </div>
</body>

</html>

结果

在这里插入图片描述

三.清除浮动

清除浮动方法

(1)额外标签法也称为隔墙法，是W3C推荐的做法。

(2)父级添加overflow属性

(3)父级添加after伪元素

(4)父级添加双伪元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09-为甚末要清除浮动</title>
    <style>
        .box {
            width: 800px;
            border: 5px solid blue;
            margin: 20px auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 300px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: rgb(38, 207, 22);
        }
    </style>
</head>

<body>
    <!-- .box>.damao{大毛}+.ermao{二毛} -->
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

结果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(1)额外标签法

在这里插入图片描述
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 300px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .clear {
            clear: both;

        }

        .footer {
            height: 200px;
            background-color: rgb(38, 207, 22);
        }
    </style>
</head>

<body>
    <!-- .box>.damao{大毛}+.ermao{二毛} -->
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <div class="clear"></div>
        <!-- span.clear -->
        <!-- <span class="clear"></span> -->

    </div>
    <div class="footer"></div>

</body>

</html>

结果

在这里插入图片描述

(2)父级添加overflow属性

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>03 清除浮动之overflow</title>
    <style>
      .box {
        /* 清除浮动 */
        overflow: hidden;
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
      }

      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }

      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

      .footer {
        height: 200px;
        background-color: black;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
  </body>
</html>

结果

在这里插入图片描述

(3)父级添加after伪元素

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素清除浮动</title>
    <style>
        /* 这段代码直接加上，然后让父盒子用 */
        .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;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

结果

在这里插入图片描述

(4)父级添加双伪元素

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>伪元素清除浮动</title>
    <style>
      /* 还是把这段代码粘贴过来，然后给父盒子写类名 */
      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }

      .clearfix:after {
        clear: both;
      }

      .clearfix {
        *zoom: 1;
      }
      /* xxxxxxxxxxxxxxxx */
      .box {
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
      }

      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }

      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

      .footer {
        height: 200px;
        background-color: black;
      }
    </style>
  </head>

  <body>
    <div class="box clearfix">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
  </body>
</html>

结果

在这里插入图片描述
在这里插入图片描述

hello_sunny123
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS浮动/常见网页布局/清除浮动/学成在线案例
cheng_09的博客
10-23 735
CSS 04 1. 浮动（float） 1.1 传统网页布局的三种方式 网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 注意：实际开发中，一个页面基本都包含了这三种布局方式 1.2 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列. 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
浮动中需要注意的小地方
H_ker的博客
07-08 172
在使用float后，需要清除浮动，否则会影响其他的文档流，可以在父级元素中输入overflow：hidden。 如果有文字部分没有浮动，可以注意下文字部分的宽度和高度是否可以在指定位置放的下。 在设计一个页面时，先确定布局再进行下面的事项。 ...
CSS浮动(常用的页面布局和浮动布局注意点)
qq_33962481的博客
12-05 365
目录常见页面二级目录三级目录 常见页面 <!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>
CSS 浮动(float)注意点
soindy
03-20 2922
浮动布局 浮动是一种半脱离标准流的排版方式 没有居中对齐 使用 margin: 0 auto; 没有作用 不区分块级元素/行内元素/行内块级元素,因为这标准流中的概念 浮动的排序规则 相同方向的浮动元素,先浮动的显示在前面.因为浮动只会盖住标准流. 不同方向的浮动元素,左浮找左浮,右浮找右浮 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定. 贴靠现象: 如果浮动的最后一个元素超过
关于float浮动的注意事项
sinat_36841379的博客
03-19 2478
关于float属性，我们是用来定义元素在哪个方向浮动的，之前这个属性是用来应用于图像的，使文本可以围绕图像周围，不过在现在的css中，任何的元素都可以进行浮动的。浮动的元素都是生成一个块级而无论之前这个元素是什么元素。这个块级框实际上就是可以设置高度，宽度等属性的意思。如果是标签，如果我们应用了浮动的话，本来标签就是行内的元素是不可以设置大小的，它的宽度一般就是它的内容的宽度，高度也是内容的高度，
CSS（浮动、常见网页布局、清除浮动）
最新发布
matrix_xiaobai的博客
08-18 161
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘选择器｛float:属性值;}属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动为什么需要清除浮动？父级没高度子盒子浮动了影响下面的布局了，我们就应该清除浮动了方式优点缺点额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构比较差父级添加overflow代码简洁无法显示溢出的部分元素清除浮动结构语义化正确。.........
css 完美清除浮动的两种解决方案
09-27
本文将介绍两种常见的清除浮动的方法：使用`clear:both`和使用伪元素。 1. **使用`clear:both`** 在HTML中，我们可以创建一个空的`div`元素，并为其添加`clear:both`样式。这种方法简单直接，但可能会增加额外的...
CSS清除浮动使父级元素展开的三个方法
09-25
假设有一个没有设置高度的`.content` div，里面有两个小div，`.left`和`.right`，分别向左和向右浮动。由于浮动，这两个子元素不再占用父级元素的高度，导致`.content`的红色边框没有完全包裹住它们，出现了父级塌陷...
CSS的clear属性清除浮动的基本用法示例
09-24
如果不进行清除浮动，`div4`会从左上角开始布局，可能会被`div1`、`div2`和`div3`的浮动影响。为了解决这个问题，我们可以给`div4`添加`clear: both`属性，让它在`div1`、`div2`和`div3`下方开始新的布局，而不是...
CSS 清除浮动Clear
09-25
理解清除浮动的概念对于构建响应式和兼容性的网页布局至关重要。如果不进行清除，可能会导致父元素高度塌陷，影响后续元素的位置，甚至影响整个页面的布局。通过学习和熟练掌握清除浮动的方法，我们可以更好地控制...
css 怎么清除浮动
09-25
标题中的“css 怎么清除浮动”是一个关于CSS布局中常见的问题，特别是在处理浮动元素时。浮动元素会导致其父元素的高度塌陷，因此需要清除浮动以保持布局的正常显示。描述部分提到的站点更新、JS压缩等是网站优化的...
CSS布局-两列左窄右宽型
林彬的专栏
05-26 2109
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两列左窄右宽型</title> <style> * { margin: 0; padding: 0; } .top, /* 并集选择器 给相同样式集体声明...
12个HTML和CSS必须知道的重点难点问题
Lee的博客
05-19 8414
这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: cen...
CSS常见网页布局
weixin_63050915的博客
02-20 1119
这个网页布局主要用到了CSS块级元素浮动和清除浮动，以及类外边距的设置 1.首先将网页分为4个标准流块级元素，分别是：top,banner,box,fotter 即boday部分为： <div class="top">top</div> <div class="banner">banner</div> <div class="box"> <ul> <...
14 目录文件夹和根目录
hello_sunny123的博客
06-20 4565
目录文件夹和根目录: 实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。 目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。 根目录:打开目录文件夹的第一层就是根目录。 如果我们想做一个网站，首先建一个文件夹命名为 web,这个文件夹里包含了大量的图片和一个显示网页的文件 web是目录文件夹 下边的页面是根目录 image文件夹不是根目录 ...
3 常用的浏览器
hello_sunny123的博客
06-15 4304
一 常用的浏览器 浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐(Firefox )、谷歌(Chrome )、 Safari(苹果浏览器)和Opera(欧朋浏览器)等。平时称为五大浏览器。 二 浏览器内核 浏览器内核(渲染引擎) :负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。 目前国内一般浏览器都会采用Webkit/Blink内核,如360,UC,QQ、搜狗等。 ...
13 图像标签(重要)
hello_sunny123的博客
06-19 2730
1.图像标签 在HTML标签中, <img>标签用于定义HTML页面中的图像。 <img scr="图像URL"/> img是单词image的缩写,意为图像。 src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。 所谓属性:简单理解就是属于这个图像标签的特性。 图像标签 代码示例： 注意把图片和程序放到一个文件夹里，这样子它才能找到 <!DOCTYPE html> <html lang="en"> <head>
56 案例淘宝焦点图布局 网页布局总结
hello_sunny123的博客
08-09 1880
案例淘宝焦点图布局如图所示： 案例:淘宝焦点图布局制作 1.大盒子我们类名为: tb-promo 淘宝广告 2.里面先放一张图片。 3.左右两个按钮用链接就好了。左箭头prev右箭头next 4.底侧小圆点u继续做。类名为promo-nav 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
10 html常用标签以及标题标签
hello_sunny123的博客
06-18 1813
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。 根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。 标题标签------ (重要) 为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,即：------ h 单词head的缩写,意为头部、标题。标签语义:作为标题使用,并且依据重要性递减。 特点： 1.加了标题的文字会变的加粗,字号也会依次变大。 2.一个标题独占一行。 标题标签代码 <!
css基础4-浮动布局
12-05
css基础-浮动

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值