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>
相关推荐
Bellafu6661 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机7 小时前
Promise 常见面试题(持续更新中)
前端·javascript