CSS 浮动

最新推荐文章于 2023-09-20 08:46:41 发布

WenYan_a

最新推荐文章于 2023-09-20 08:46:41 发布

阅读量85

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/WenYan_a/article/details/125931986

版权

概述

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

标准流（普通文档流）

文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示

浮动
        float: left; 左浮动，标签向左浮动
        float: right;右浮动，标签向右浮动
        float: none;不浮动，默认值，并且会显示在其文本中出现的位置

        浮动特性：
        1.浮动元素脱离正常标准流不脱离文本流
        2.浮动元素不占位，父级盒高度为零
        3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行
        4.使行级标签支持宽高
        5.提升层级


 注意：元素浮动后类似于行内块标签（没有行内块的间隙问题），在一行内展示，可以设置宽高。