HTML的布局

最新推荐文章于 2025-02-24 20:19:13 发布
最新推荐文章于 2025-02-24 20:19:13 发布
阅读量1k 收藏 9
点赞数
文章标签： CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FairyKunKun/article/details/123889422
版权
本文详细介绍了如何使用CSS的浮动技术让两个块级元素在同一行显示，并探讨了浮动带来的父元素塌陷问题及其解决方案，包括设置固定高度、使用空盒子清除浮动以及利用伪元素`::after`。通过实例代码展示了不同方法的应用和效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

重中之重

需求：

Html默认采用文档流布局方式：浏览器会自上而下，从左到右依次显示标签元素，遇到块级元素则独占一行，行级元素同行共存。

两个块级元素如何在同一行显示？

办法1：使用display   inline  或inline-block  ----》打破默认的文档流布局方式。

        问题：

       

办法2：使用浮动技术。

float:  none 默认的文档流

      left左浮动

      right右浮动

原始素材

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 750px;
            height: 600px;
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        #div2{
            width: 250px;
            height: 150px;
            background-color: gray;
        }
        #div3{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
</body>
</html>

 

需求：使用浮动技术，让div1和div2依靠左侧并排显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 750px;
            height: 600px;
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 100px;
            background-color: pink;
            /*div是一个块级元素，已经在文档流中牢牢占据了位置，这需要把文档流的位置让出来*/
            /*使用浮动（float），释放文档流空间，下面的元素上移，围绕着浮动元素显示*/
            float: left;
        }
        #div2{
            width: 250px;
            height: 150px;
            background-color: gray;
        }
        #div3{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
</body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 750px;
            height: 600px;
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 100px;
            background-color: pink;
            /*div是一个块级元素，已经在文档流中牢牢占据了位置，这需要把文档流的位置让出来*/
            /*使用浮动（float），释放文档流空间，下面的元素上移，围绕着浮动元素显示*/
            float: left;
        }
        #div2{
            width: 250px;
            height: 150px;
            background-color: gray;
            /*div2使用，释放文档流，后面的元素上移，div2怎么显示？左浮，发现左边已经有一个元素，因此会挨着div显示*/
            float: left;
        }
        #div3{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
</body>
</html>

div3跑到最右边

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 750px;
            height: 600px;
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 100px;
            background-color: pink;
            /*div是一个块级元素，已经在文档流中牢牢占据了位置，这需要把文档流的位置让出来*/
            /*使用浮动（float），释放文档流空间，下面的元素上移，围绕着浮动元素显示*/
            float: left;
        }
        #div2{
            width: 250px;
            height: 150px;
            background-color: gray;
            /*div2使用，释放文档流，后面的元素上移，div2怎么显示？左浮，发现左边已经有一个元素，因此会挨着div显示*/
            float: left;
        }
        #div3{
            width: 300px;
            height: 200px;
            background-color: blue;
            /*div3使用float，会脱离文档流，朝着右边浮动过去*/
            float: right;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
</body>
</html>

 

修改div3的宽度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 750px;
            height: 600px;
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 100px;
            background-color: pink;
            /*div是一个块级元素，已经在文档流中牢牢占据了位置，这需要把文档流的位置让出来*/
            /*使用浮动（float），释放文档流空间，下面的元素上移，围绕着浮动元素显示*/
            float: left;
        }
        #div2{
            width: 250px;
            height: 150px;
            background-color: gray;
            /*div2使用，释放文档流，后面的元素上移，div2怎么显示？左浮，发现左边已经有一个元素，因此会挨着div显示*/
            float: left;
        }
        #div3{
            width: 400px;
            height: 200px;
            background-color: blue;
            /*div3使用float，会脱离文档流，朝着右边浮动过去*/
            float: right;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
</body>
</html>

 

现象：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 500px;
            /*没有设置高度*/
            border: 1px solid red;
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        #div2{
            width: 150px;
            height: 120px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </div>
</body>
</html>

 父容器被自动撑满

Div1和div2作用float  ,背后就是脱离文档流

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 500px;
            /*没有设置高度*/
            border: 1px solid red;
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        #div2{
            width: 150px;
            height: 120px;
            background-color: gray;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </div>
</body>
</html>

 

父容器坍塌成一条线，也就是所谓的坍塌问题

塌陷问题的解决办法：

（1）给父容器设置高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 500px;
            height: 120px;
            border: 1px solid red;
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        #div2{
            width: 150px;
            height: 120px;
            background-color: gray;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </div>
</body>
</html>

 

简单，但是需要计算最高的那个

（2）借助空盒子

因为使用了浮动才引起了塌陷的负面效果，因此要消除负面效果

clear:both(不允许左右有浮动元素)   left(不允许左边有浮动元素)  right(不允许右边有浮动元素)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 500px;
            border: 1px solid red;
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        #div2{
            width: 150px;
            height: 120px;
            background-color: gray;
            float: left;
        }
        .empty{
            height: 0px;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div class="empty"></div>
    </div>
</body>
</html>

 

优点：不需要计算盒子内部最大的内容高度

缺点：如果网页中大量使用浮动技术，那么会产生大量的空盒子。

(3)在父容器的最后一个子元素的位置动态的添加一个空盒子。

不会，抄牛人的网站

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 500px;
            border: 1px solid red;
        }
        #parent:after{
            content: "hello";
        }
        /*在父元素的最后一个子元素位放一个文本*/
        #div1{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        #div2{
            width: 150px;
            height: 120px;
            background-color: gray;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </div>
</body>
</html>

 

最终的解决方案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>CSS的背景</title>
    <!--<link rel="stylesheet" href="../css/css03.css" type="text/css">-->
    <style type="text/css">
        html,body,div{
            margin: 0px;
            padding: 0px;
        }
        #parent{
            width: 500px;
            border: 1px solid red;
        }
        #parent:after{
            content: ".";
            height: 0px;
            visibility: hidden;
            display: block;
            clear: both;
        }
        /*在父元素的最后一个子元素位放一个文本*/
        #div1{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        #div2{
            width: 150px;
            height: 120px;
            background-color: gray;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </div>
</body>
</html>

 

HTML-布局
m0_73595197的博客
04-14 867
布局 1.1 盒子布局 1.1 border 盒子的主体为border，border表示边框，它有几种标签限制： 1.1.1 none（定义无标签） <!DOCTYPE html> <html lang="en"> <head> <title>布局</title> <style> div4{ border: 1px none ; background-col
HTML布局
weixin_57959921的博客
03-29 1149
HTML布局
【CSS】HTML元素布局基础总结
最新发布
巽的博客
02-24 777
内部表现定义其内部子元素的显示和布局。属性，使元素脱离原始的文档流浮动布局。文本和内联元素可以环绕浮动元素。默认按容器最多能容纳的最小宽度。内容：所有被排列元素组成的区域。并且如果元素宽度大于最小宽度。时，会减少元素个数，换行排列。：指定垂直方向元素的对齐方式。：指定水平方向元素的对齐方式。随页面宽度变化动态排列元素。：内部元素类似表格形式布局。外部表现定义元素自身的显示。：相对定位，相对父元素定位。可以指定固定宽度或浮动宽度。容器：包裹被排列元素的元素。元素：就是容器的直接子元素。
HTML 布局
木晓的博客
12-16 197
使用 元素的 HTML 布局 注释： 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。 这个例子使用了四个 元素来创建多列布局： 实例 <body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br>...
web前端－HTML布局－014
helloMr_wo的博客
09-29 505
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。HTML 布局 - 使用<div> 元素div 元素是用于分组 HTML
Android采用HTML布局,入门Android布局之html
weixin_26907223的博客
05-26 1297
新建一个能顺利运行的Android工程后，会发现程序入口AndroidManifest.xml和布局文件activity_layout.xml都是xml文件。xml是Extensible Markup Language的简称，即可扩展标记语言。使用xml能方便的实现数据的跨平台传输和使用。随着万维网(www)的兴起，在其基础上衍生了更适合页面展示的html。使用html能够轻易做出非常酷炫的效果，...
HTML的三种布局运用,html布局 左右固定，中间只适应，三种方法实现
weixin_34927903的博客
07-15 1185
html布局 左右固定，中间只适应，三种方法实现使用自身浮动法定位//html使用自身浮动法定位//style#left_self,#right_self {width: 200px;height: 100px;background-color: #ffe6b8}#left_self {float: left;}#right_self {float: right;}#center_self {ma...
制作首页APP前端HTML布局代码
03-08
一个简单的HTMl制作的布局页面，可以根据以此进行编写
简单的HTML布局，可以提供很好的思路
03-08
一个简单的HTML页面布局
html页面布局
墨城烟柳ベ旧人殇的博客
04-12 7527
本文主要是用HTML语言实现页面布局。
HTML5-布局
luckxing的博客
09-27 1308
absolute  绝对坐标 relative 相对坐标 padding: 0; margin: 0; style=" font-size: 16px; position:absolute;right: 5px; top: 30px;" 左右放置 span id="">span>  组合文档中的行内元素 上下放置 div id="">div>
html-布局（基础）
maomaog16的博客
06-04 474
总结：https://mp.weixin.qq.com/s/jkTiZdS7wE-Xwv3A3RKwAg水平居中--------：1.  inline-block (子)  +  text-align （父）（推荐）缺点：child里的文字也会水平居中，可以在.child添加text-align:left; &lt;div class="parent"&gt; &lt;div...
HTML布局方式
wwqwwqwwq352的博客
06-12 180
盒子布局 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box1{ width: 200px; height: 200px; border: 1px solid black;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FairyKunKun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值