什么是浮动
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
对于新手 CSS 开发人员,尤其前端 Web产品开发人员,float 属性可以说是用得最频繁的布局属性了,所以他们很可能会对 float属性有误解,认为 float 属性就是为各种块状布局而设计的,实际上不是的。浮动的本质就是为了实现文字环绕效果。而这种文字环绕,主要指的就是文字环绕图片显示的效果。
元素怎样浮动
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
属性
float:left; 左浮动
float:right;右浮动
浮动的情况
下面我就用这个布局为例子来讲解浮动,css样式外面的div给了一个高度,其他的不多说。
html代码
css代码
效果图
1.左浮动 float:left;
给里面的三个标签 float:left; 属性,看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展示的,但是看下图会发现他们按照顺序排列成一排了。
2.右浮动 float:right;
同样的我们给box中的p标签一个 float:right; 属性。他们会按照顺序排到右边去了。
3.这一次我们只给第二个p浮动来看看会发生什么情况,这时候你会发现,3不见了,他其实在2的下面,我给3一个宽一点的宽度。会发现3在2的下面。
4.把外面的div宽度变小一些,p浮动
如果父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示
浮动之后有很多特性
1.块级元素可以横排显示
2.行内元素可以设置宽度和高度
3.元素没有设置宽度和高度时,宽度为内容撑开宽
4.支持margin
5.脱离文档流
6.提升半层级
问题:不支持margin:auto;
为什么要清除浮动
首先我们先不设置高度,给外部盒子设置一个边框,此时我们会发现浮动前盒子正常
但是在浮动后,我们会发现子元素浮动会造成父级盒子高度坍塌,这样如果下面在进行继续布局的话会使页面布局错乱。
清除浮动的方法
1、给父元素添加固定高度,缺点:一般都是元素内容撑开高度,拓展性不好。
2、给最后一个浮动元素下面新加一个元素,清除浮动,添加一个clear:both属性;
缺点:随意的添加一个空元素,不符合代码规范
3、伪元素清除浮动:给浮动元素的父元素添加一个元素clerafix,然后进行伪元素清除浮动。
笔记
1:浮动后:元素本身脱离文档流,原来的位置被其他元素所占据
2:浮动后;在同一个父元素中,目标元素会占据一个浮动后位置。
3:注意:浮动只能是子元素在容器中进行位置移动。如果父容器剩余宽度不能容纳两一个子元素,那么就换行。
4:同一位置多个元素;具有浮动属性的元素;层级高于不具有浮动属性的元素
总结,浮动规律:
第一步:元素在布局流中的起始位置;
第二步:沿自身水平方向进行浮动,如果水平方向空间不够,那么自动换到下一行
5:问题:如果父元素没有有高度那么会出现什么问题呢??
父元素没有设置固定高度,那么父元素高度由子元素撑起来。
如果所有子元素都脱离了文档流,那么父元素就没有高度了
只有不脱离文档流的元素才能撑起父元素的高度
6: 解决浮动 带来的问题,
- 方式一:给父元素设置一个固定高度
- 方式二:在最后一个浮动元素,元素下面新加一个元素,清除浮动
- 方式三:伪元素清除;给父元素添加伪元素 xxx::after{content:" ";display:block ;clear:both};
以上所写就是我目前学习对浮动知识的理解和总结,谢谢!