浮动

视觉格式化模型，大体将页面中盒子的排列方式分为3种方式：

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为

left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右

默认值为none

当一个元素浮动时，它一定会变成块盒（display属性变为block）
浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

宽度为auto时，适应内容宽度（常规流会吸收剩余空间，要撑满父元素的内容盒）
高度为auto时，适应内容高度（与常规流一致）
margin为auto时，则为0（四个方向都是）(常规流如下)

 1. 每个块盒的总宽度，必须刚好**等于**包含块的宽度
- 宽度默认为auto(把剩余的空间吸收掉)
- margin也可以设为auto(也是把剩余的空间吸收掉)，默认为0
- width吸收能力强于margin
- 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被**margin-right**吸收

边框、内边距、百分比设置与常规流一样（除高度以外，其余的百分比都与父元素的内容盒的宽度相关，高度的百分比要看情况）

- 高度的百分比：
1）. 包含块的高度取决于子元素的高度时，子元素里设置的百分比无效
2）. 包含块的元素不取决与子元素的高度时，百分比相对于父元素的高度

盒子排列

左浮动的盒子，靠上靠左排列
右浮动的盒子，靠上靠右排列
浮动盒子在包含块中，会避开常规流块盒
常规流块盒在排列时，无视浮动盒子
行盒在排列时，会避开浮动盒子
外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成行盒包裹文字，该行盒叫做匿名行盒
想要文字和图片有一定间距，是对img设置margin噢

高度坍塌

高度坍塌的原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：clear

默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

参考资料

【渡一教育】袁进老师的html+css基础课程
【渡一教育】袁进老师相关课程源代码

CSS基础（11）- 浮动相关推荐

CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
html,css基础(2)~浮动布局，弹性布局，css2D,3D转换，css动画，长度单位
目录 1,浮动布局 2,弹性布局 3,CSS 2D 转换 4,CSS 3D 转换 5,css动画 6,长度单位 7,元素,文本阴影 8,表单元素 9,响应式布局 1,浮动布局 float,设置元素使用 ...
CSS基础(part13)--浮动
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录浮动 CSS布局的三种机制为何需要浮动(float) 浮动的语法浮动的3种特性浮动元素与父盒子的关系浮动元素与兄弟盒子的关系清除 ...
CSS基础-清除浮动-李南江
配套视频下载地址清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度 <style>div{background-color: red;}p{width: 200px;heig ...
CSS基础学习--17 布局 - 水平垂直对齐
一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础之清除浮动
CSS基础之清除浮动本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝 ...
CSS基础学习--16 Float(浮动)
一.定义 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素的水平方向浮动,意味着元素只能左右移动 ...

CSS基础（11）- 浮动

文章目录

浮动

应用场景

浮动的基本特点

盒子尺寸

盒子排列

高度坍塌

参考资料

CSS基础（11）- 浮动相关推荐

最新文章

热门文章