CSS基础----盒子的浮动

最新推荐文章于 2023-02-13 17:38:33 发布

小白_小可

最新推荐文章于 2023-02-13 17:38:33 发布

阅读量2.3k

点赞数 1

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/Layfolk_XK/article/details/109592207

版权

今天我们来学习我们在页面布局中经常会用到的浮动(Float)
这里我们就不得不提页面布局中的三种方式:
1.普通流 2.浮动流 3.定位流

浮动(float)

有很多的页面布局我们利用标准流(按照标签规定好的方式排列)是没法完成的这时候,我们就得用到浮动
浮动最典型的应用就是使多个块元素一行排列显示
格式:选择器 { float: none/left/right ;}
浮动的特性:
1.浮动的元素脱离了标准流(脱标)
2.浮动的元素会一行显示并且元素顶部对齐的
3.浮动的元素具有行内块元素的特性。
注意: 浮动的盒子不会保留原来的位置,任何元素都可以添加浮动,并且元素添加了浮动或会自动带有行内块元素的特性,这样原本的行内元素就可以改变大小等属性
为了约束浮动元素的位置,我们可以先用标准父元素排列上下位置
一个盒子中有许多的小盒子,一个小盒子浮动了,按理说别的小盒子(兄弟元素)也要进行浮动
接下来我们来举个栗子 😃 :

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习</title>
    <style

最低0.47元/天解锁文章

小白_小可

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
CSS基础----盒子的浮动

今天我们来学习我们在页面布局中经常会用到的浮动(Float)这里我们就不得不提页面布局中的三种方式:1.普通流 2.浮动流 3.定位流浮动(float)有很多的页面布局我们利用标准流(按照标签规定好的方式排列)是没法完成的这时候,我们就得用到浮动浮动最典型的应用就是使多个块元素一行排列显示格式:选择器 { float: none/left/right ;}浮动的特性:1.浮动的元素脱离了标准流(脱标)2.浮动的元素会一行显示并且元素顶部对齐的3.浮动的元素具有行内块元素的特性。注意
复制链接

扫一扫