css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。
在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结。
一、浮动的定义
使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流,文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了。
二、属性
float:left; 左浮动
float:right;右浮动
三、浮动的情况
下面我就用这个布局为例子来讲解浮动,css样式外面的div给了一个高度,其他的不多说。
1.左浮动 float:left;
给里面的三个p标签 float:left; 属性,看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展示的,但是看下图会发现他们按照顺序排列成一排了。
2.右浮动 float:right;
同样的我们给box中的p标签一个 float:right; 属性。他们会按照顺序排到右边去了。
3.这一次我们只给第二个p浮动来看看会发生什么情况,这时候你会发现,3不见了,他其实在2的下面,我给3一个宽一点的宽度。会发现3在2的下面。
4.给3一个浮动
他会没有什么变化,因为浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的
5.把外面的div宽度变小一些,p浮动
如果父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示。
6.浮动的特殊情况
以换行的那个元素为基准,如果有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素“卡住”。初始样式是左图.
7.浮动对文字的影响 给p标签浮动
浮动框只会占据自己的位置,使文字可以围绕浮动框显示
四、浮动之后有很多特性
1.块级元素可以横排显示
2.行内元素可以设置宽度和高度
3.元素没有设置宽度和高度时,宽度为内容撑开宽
4.支持margin
5.脱离文档流
6.提升半层级
问题:不支持margin:auto;
五、清除浮动
- 为什么要清除浮动?
前面提到了我给了外面的div一个高度,这里我们不给他高度,让里面的p浮动看看会发生什么情况。
未浮动
浮动之后
我们会发现子元素浮动会造成父级盒子高度坍塌,这样如果下面在进行继续布局的话会使页面布局错乱,(下图中黄色的盒子是nav下的div)如果想要继续布局就要清除浮动了,这里我介绍几种清除浮动的方法。
标签和样子如下两幅图
父级的做法
- 父级 紧邻兄弟法
给nav一个clear:both属性,下图会发现可以正常显示
缺点:只是让后面的元素正常显示,并没有撑开box的高度
2.父级给高度
box给高度,可以正常显示。
缺点:一般都是元素内容撑开高度,拓展性不好。
3.父级元素 display:inline-block;
box给display:inline-block;可以正常显示
缺点:父级盒子margin:auto;失效,会发现上部分和下面黄色中间有间隙。
4.父级overflow:hidden;
可以正常显示
缺点:需要配合宽度
子元素
1.要加给浮动元素末尾的后面再添加一个元素。加上一个clear属性
可以正常显示
缺点:随意的添加一个空元素,不符合代码规范
2.恭喜你看到了这里,在这里我介绍一种当今最主流的清除浮动的方法。
after伪元素清除浮动,添加给box,依旧可以正常显示,不发图了。
clearfix:after{content:””; display:block; clear:both;}
以上就是我对浮动和清除浮动的知识的见解和总结,如有不足之处,希望各位可以指正,谢谢!
css 浮动和清除浮动相关推荐
- 前端笔记(6)css布局机制,浮动,清除浮动,图片格式,ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
- 进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
- 博学谷html css,博学谷 - CSS笔记12 - 清除浮动
1.为什么需要清除浮动 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元 ...
- CSS基础之清除浮动
CSS基础之清除浮动 本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝 ...
- css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
- CSS之浮动/BFC/清除浮动(十二)
CSS 浮动/BFC/清除浮动 1,实现 CSS 布局的几种策略 2,正常布局流(Normal Flow) 2.1,正常布局流中,块级元素的排列方式 2.2,正常布局流中, 内联元素排版方式 3,浮动 ...
- Web前端,CSS中的浮动、清除浮动
前言 持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用 早期的作用:图文环绕 现在的作用:网页布局 • 场 ...
- CSS :浮动与清除浮动
CSS :浮动与清除浮动 1.浮动 1.css 布局的三种机制 2.为什么需要浮动 3.什么是浮动 1.浮动口诀之浮 2.浮动口诀之漏 3.浮动口诀之特 4.浮动小结 5.浮动(float)的应用(重 ...
- CSS——CSS浮动与清除浮动
文章目录 浮动 普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮 漏 特 案例:体会浮动 现在就可以用float实现一些基本页面布局了 链接 清除浮 ...
最新文章
- Windows PE导出表编程3(暴力覆盖导出函数)
- DataScience:深入探讨与分析机器学习中的数据处理之线性变换—标准化standardization、归一化Normalization/比例化Scaling的区别与联系
- 疯子的算法总结14--ST算法(区间最值)
- java 使用string_java中string怎么使用
- 学习Apache Camel –实时索引推文
- android平台的s5pc110触摸屏驱动分析
- Jenkins(Pipeline)
- pythongetattribute_Python __getattribute__ vs __getattr__ 浅谈
- Android 开发笔记“context和getApplicationContext”
- C语言正交表测试用例,正交表设计用例(简单+实用) - Jackc的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...
- c语言文件操作可重入,C语言试题
- 数据工程师岗位职责解析
- ctf音频yinxie_CTF牛刀小试合集
- MongoDB可视化客户端管理工具之NoSQLbooster4mongo
- 微信头像偶现请求失败异常排查
- 1919:【02NOIP普及组】选数
- android 奥利奥功能,一加5/5T吃上Android 8.0奥利奥 这些新功能特性你不可不知
- Contiki内核原理
- React - review 2
- Warning: getFieldDecorator will override value
热门文章
- 访问GitHub超慢的解决办法
- 流线动态图python_Node.js Stream(流)
- python中__init__.py的作用、module和package
- python SimpleHTTPServer 快速共享文件
- PHP 中文文件名 空格等 CURL 读取
- 机电传动控制大作业 第一阶段
- Spring环境的搭建与测试 (spring2.5.6)
- ubuntu postgresql 的安装
- C++ operator操作符重载(++,--,-,+,())
- [转]JavaScript面向对象的特性