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 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆4 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636024 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军5 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句7 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜8 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI8 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课10 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven10 分钟前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾10 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js