css_19_浮动

- 元素浮动后的特点

1.脱离文档流。

2.不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),而且可以设置宽高。

3.不会独占一行,可以与其他元素共用一行。

4.不会 margin 合并,也不会 margin 塌陷,能够完美的设置四个方向的margin和padding。

5.不会像行内块一样被当做文本处理(没有行内块的空白问题)。

- 浮动后的影响。

  • 兄弟元素的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响。
  • 父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。

解决方案:

1.方案一:给父元素指定高度。

2.方案二:给父元素也设置浮动,带来其他影响。

3.方案三:给父元素设置 overflow:hidden

4.方案四:在所有浮动元素的最后面,添加一个块级元素 ,并给该块级元素设置 clear:both

举例:

css 复制代码
        .outer {
            width: 500px;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(10, 47, 61);
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
        .box1 {
            height: 230px;
        }
css 复制代码
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
相关推荐
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121386 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css