首页 前端知识 【web前端】CSS浮动

【web前端】CSS浮动

2024-06-18 00:06:02 前端知识 前端哥 82 155 我要收藏

多个块级元素纵向排列找标准流,横向排列找浮动

2a1a0d03032d44bc94d0dfe3fda82a0f.jpg

 

浮动的特性:

(1)浮动元素会脱离标准流(脱标)

(有的浮动,有的没浮)

5c861236b2f946a995075abdc05151b8.jpg

 b627fc8c453f4639b55ba4e75fb6e300.jpg

(2)浮动的元素会在一行内显示且元素顶部对齐

(全设置浮动)

bdac2a9822ed45dcbaf21adb1b771f0d.jpg

(3)浮动的元素会有行内块元素的特性

如果行内元素有了浮动,不需要转化为行内块元素\块级元素就可以直接给高度宽度

5efbdc8cca954d73957d4326d794276c.jpg

 

浮动元素经常搭配标准流的父元素

策略:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,

847c09bbf3284974aefaf1895103acce.jpg

 

 

浮动的两个注意点:

edf6f74993eb480892a6975ad61c7800.jpg

 

为什么要清除浮动:

203e3d8589d74397a4afb2b2d4f1ea08.jpg

 

清除浮动的方法:

(1)额外标签法(隔墙法)

6f5e2f2026304dd7bb49aba7c5aa305a.jpg

 

(2)父级添加overflow

给父元素添加overflow属性,属性值有hidden(常用),scroll,auto

 

 (3)after伪元素

给父元素添加标签58e37ac72d5b41f78e7de51e77622da8.jpg

 

(4)双伪元素

也是给父元素添加

183abb8eab6a4867859be5f0d9c68428.jpg

 

补:

 

图片格式

298c2661c9df45c58770c46c8761ef79.jpg

 切图:

403914a894eb441fbbc1e45808f6590a.jpg

 f4f4c83bd2844ad185580c8002ae842b.jpg

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12588.html
标签
评论
发布的文章

jQuery基本使用

2024-06-24 02:06:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!