关于text-align与浮动float的区别

蔚落 2024-03-26 08:39 6阅读 0赞

## 一、释义 ##

1.  ### text-align： ###

作用于文字和图片，达到居左中右效果。如下：

<!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>Document</title>
        <style>
            #div01{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="div01">
            <div>CSS</div>
            <img src="./Day008CSS动画/风景.jpg" alt="">
        </div>
    </body>
    </html>

![8958f166800c4e8b6cc13137da6b6e0a.png][]

1.  ### float： ###

是元素脱离标准文档流，释放空间，即浮动在表面，达到居左右效果。如下：

<!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>Document</title>
        <style>
            #div01{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="div01">
            <div>CSS</div>
            <img src="./Day008CSS动画/风景.jpg" alt="">
        </div>
    </body>
    </html>

![099f83d758b6e7df0500a08f7c16b2b8.png][]

会出现父元素坍塌问题。

## 二、区别 ##

text-align必须设置在父元素中，子元素生效；而float直接作用于元素本身，如果父元素没有宽高就会出现高度坍塌。

[8958f166800c4e8b6cc13137da6b6e0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/409044df27ac4e5fa2c6b7a73f670c85.png
[099f83d758b6e7df0500a08f7c16b2b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d9665ff9c90b411580901b9416b3a1cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关关于text-align与浮动float的区别

一、释义 1. text-align：作用于文字和图片，达到居左中右效果。如下： <!DOCTYPE html> <html lang="en

蔚落/ 2024年03月26日 08:39/ 0 赞/ 7 阅读

相关关于float浮动的注意事项

关于float属性，我们是用来定义元素在哪个方向浮动的，之前这个属性是用来应用于图像的，使文本可以围绕图像周围，不过在现在的css中，任何的元素都可以进行浮动的。浮动的元素都是

╰+哭是因爲堅強的太久メ/ 2022年09月30日 06:50/ 0 赞/ 227 阅读

相关浮动float和清楚浮动clearfix

浮动，在HTML排版常常被使用的一个CSS属性，很多网页设计都会用到浮动，但并不是说浮动是网页排版的必需品。由于浮动具有破坏性，很多时候采用浮动反而会造成适得其反

àì夳堔傛蜴生んèń/ 2022年07月28日 08:46/ 0 赞/ 282 阅读

相关 CSS Float（浮动)

CSS Float（浮动) Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，

向右看齐/ 2022年06月09日 14:49/ 0 赞/ 319 阅读

相关浮动（float）与inline-block的区别

结论：两者主要区别在于当标签的【高度不一致】时，体现出的差异如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block 在浮动时，若第一个

﹏ヽ暗。殇╰゛Y/ 2022年05月25日 10:26/ 0 赞/ 156 阅读

相关【CSS】 Float(浮动)

什么是 CSS Float（浮动）？ ![在这里插入图片描述][20190129181403885.png] CSS 的 Float（浮动），会使元素向左或向右移动，

快来打我*/ 2022年04月23日 08:42/ 0 赞/ 356 阅读

相关浮动(float)

浮动(float) 普通流(normal flow) 这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。前面我们说过，网页布局的核心，就是用CSS来

谁借莪１个温暖的怀抱￠/ 2022年03月21日 05:25/ 0 赞/ 322 阅读

相关关于CSS深入理解float浮动，float且用且珍惜

今天很高兴为大家分享一下，关于深入理解float的那些二三事~ 首先关于float浮动的问题，大家还是要知道一点点它的历史，这对之后深入理解float很重要。其实当初写f

落日映苍穹つ/ 2022年03月15日 15:52/ 0 赞/ 340 阅读

相关 float浮动的世界

![967490-20190404113815607-895394841.png][] ![967490-20190404113835348-2

红太狼/ 2022年01月07日 22:53/ 0 赞/ 281 阅读

相关浮动(float)

浮动(float)是基于[CSS][]的现代Web设计用到的主要功能之一，可以用它来创建多累的网页布局，从无序列表创建导航工具条，不是用table而创建类似表格的对其方式等。

朴灿烈づ我的快乐病毒、/ 2021年10月09日 03:18/ 0 赞/ 510 阅读