CSS浮动，水平布局

妖狐艹你老母 2022-09-02 04:27 195阅读 0赞

# 浮动定义： #

*  属性名：float
 *  属性值：none默认，left左浮动，right右浮动
 *  元素浮动之后，可以不用满足文档流中元素水平布局的等式，即：元素浮动后会从文档流中脱离，下面文档流中块元素会补上去，从头开始排列

## 浮动的特定： ##

*  浮动元素默认不会从父元素中移出
 *  如果浮动元素上边是没有浮动的块元素，浮动元素不会上去
 *  浮动元素不会超过他前面浮动的兄弟元素，尽管有位置
 *  如果页面不足以放下所有的浮动元素时，会像文档一样，从下一行开始排列

## 浮动的作用： ##

*  浮动可以让元素可以水平排列，完成水平方向的布局
 *  元素浮动后，下面的文字补充上来时，文字不会被遮住，即完成文字环绕图片效果![20210730163659918.png][]

## 浮动演示： ##

.out{
                width: 100px;
                height: 100px;
                background:red;
                float: left;
                }
                .out2{
                width: 100px;
                height: 100px;
                background:green;
                float: left;
                }
                .out3{
                width: 100px;
                height: 100px;
                background:blue;
                float: right;
                }

![20210730162410162.png][]

[20210730163659918.png]: /images/20220829/0c763077f3114d12bd138cd557d23b84.png
[20210730162410162.png]: /images/20220829/d189bf11d8474c6285b1034ab64f77ce.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平垂直居中对齐

阅读目录 CSS 布局 – Overflow overflow: visible overflow: hidden over

末蓝、/ 2023年10月06日 22:32/ 0 赞/ 56 阅读

相关 CSS - 浮动布局（float）

目录标准布局标准流浮动与浮动流，及元素脱标概念浮动元素浮动的特点浮动带来的问题：标准流父级容器高度塌陷清除浮动浮动布局 + margin负值

小灰灰/ 2023年09月28日 15:57/ 0 赞/ 19 阅读

相关浮动布局

浮动： 1.浮动是布局的一种方式：也是元素脱离文档流的方式 2.浮动 float 3.浮动范围：只能在父容器内部浮动，

谁践踏了优雅/ 2023年06月12日 09:20/ 0 赞/ 18 阅读

相关 CSS浮动，水平布局

浮动定义：属性名：float 属性值：none默认，left左浮动，right右浮动元素浮动之后，可以不用满足文档流中元素水平布局的等式，即：元素浮

妖狐艹你老母/ 2022年09月02日 04:27/ 0 赞/ 196 阅读

相关 CSS实战手册_阅读笔记14_布局_浮动布局

![Center][] [Center]: /images/20220810/0ae4f54c2f96487598d060c8667d7d77.png

超、凢脫俗/ 2022年08月14日 01:00/ 0 赞/ 158 阅读

相关【CSS】布局 - 水平 & 垂直对齐

![在这里插入图片描述][20190129183148727.png] 元素居中对齐要水平居中对齐一个元素(如 ), 可以使用 margin: auto;。设

r囧r小猫/ 2022年04月23日 08:50/ 0 赞/ 272 阅读

相关【CSS】深入理解CSS浮动布局

很多人对float属性理解的并不好，所以对float布局就有一点恐惧（比如我~），因为用float布局时会出现很多莫名其妙得问题，比如： 1，父元素的高度怎么没啦？ 2

逃离我推掉我的手/ 2022年04月18日 04:55/ 0 赞/ 326 阅读

相关 css浮动布局总结

什么是浮动布局：浮动布局：默认流动布局有不足，让男标签可以并排显示如果一个元素浮动了，就相当于这个元素出国，就会产生影响：影响1：元素出国了，父元素里面就相

淡淡的烟草味﹌/ 2021年09月29日 16:42/ 0 赞/ 405 阅读

相关 css浮动布局,了解一下

float浮动 none 默认值不浮动 left right inherit 继承父元素的float block（块）元素的特点： ①总是在新行上开始

ゝ一世哀愁。/ 2021年09月15日 12:52/ 0 赞/ 363 阅读

相关 CSS 布局 - 水平 & 垂直对齐

元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。外边距设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度

秒速五厘米/ 2021年09月15日 05:32/ 0 赞/ 427 阅读