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>
相关推荐
csj502 分钟前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
刘新明19891 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
言德斐2 小时前
Python Web框架深度对比:Django vs Flask vs FastAPI(含优缺点与选型策略)
前端·python·django
疯狂的沙粒2 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
jingling5552 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
温宇飞3 小时前
浏览器路由系统的一种实践
前端
老前端的功夫4 小时前
Vue 插槽深度解析:从基础到高级架构设计
前端
pre_lee4 小时前
vue2响应式原理
前端
小奶包他干奶奶4 小时前
如何使用vscode和express开发node.js
前端·node.js