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>
相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript