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一个宽一点的宽度。会发现32的下面。

 

4.3一个浮动

  他会没有什么变化,因为浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的

   

5.把外面的div宽度变小一些,p浮动

  如果父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示。

     

 

6.浮动的特殊情况

  以换行的那个元素为基准,如果有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素“卡住”。初始样式是左图.

   

 

 

7.浮动对文字的影响 p标签浮动

  浮动框只会占据自己的位置,使文字可以围绕浮动框显示

    

 

 

四、浮动之后有很多特性

  1.块级元素可以横排显示

  2.行内元素可以设置宽度和高度

  3.元素没有设置宽度和高度时,宽度为内容撑开宽

  4.支持margin

  5.脱离文档流

  6.提升半层级

  问题:不支持margin:auto;

五、清除浮动

  1. 为什么要清除浮动?

前面提到了我给了外面的div一个高度,这里我们不给他高度,让里面的p浮动看看会发生什么情况。

未浮动

     

 

浮动之后

        

   我们会发现子元素浮动会造成父级盒子高度坍塌,这样如果下面在进行继续布局的话会使页面布局错乱,(下图中黄色的盒子是nav下的div)如果想要继续布局就要清除浮动了,这里我介绍几种清除浮动的方法。

  标签和样子如下两幅图

 

            

 

      

 

父级的做法

  1. 父级 紧邻兄弟法

    给nav一个clearboth属性,下图会发现可以正常显示

    缺点:只是让后面的元素正常显示,并没有撑开box的高度

      

 

  2.父级给高度

    box给高度,可以正常显示。

    缺点:一般都是元素内容撑开高度,拓展性不好。     

 

   3.父级元素 display:inline-block;

    boxdisplay:inline-block;可以正常显示

    缺点:父级盒子margin:auto;失效,会发现上部分和下面黄色中间有间隙。

      

 

  4.父级overflow:hidden;

    可以正常显示

    缺点:需要配合宽度

          

 

   子元素

    1.要加给浮动元素末尾的后面再添加一个元素。加上一个clear属性

      可以正常显示

      缺点:随意的添加一个空元素,不符合代码规范

             

 

   

 

  2.恭喜你看到了这里,在这里我介绍一种当今最主流的清除浮动的方法。

    after伪元素清除浮动,添加给box,依旧可以正常显示,不发图了。

    clearfix:after{content:””; display:block; clear:both;}

 

以上就是我对浮动和清除浮动的知识的见解和总结,如有不足之处,希望各位可以指正,谢谢!

 

 

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369102.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java Code Geeks和Packt提供的Hadoop书籍赠品

亲爱的极客,由于参与度很高,并且为了有机会赢得尽可能多的Hadoop粉丝,我们决定将竞赛延长一个星期,直到下周二。 各位极客, 赠品在Java Code Geeks上继续。 我们很高兴地宣布,我们再次与Packt Publishin…

【转】 差分约束系统详解(转化为最短路) (概念)

---恢复内容开始--- 转自:http://www.cnblogs.com/void/archive/2011/08/26/2153928.html 差分约束系统中: 如果求未知数的最大值,那么按小于等于建图后求最短路即可。(因为求最短路是由无穷向下约束而得到的,所以得到…

jq实现点击某元素之外触发事件

1 $(document).bind("click",function(e){ 2 var target $(e.target); 3 if(target.closest("#parentId").length 0){//点击id为parentId之外的地方触发 4 layer.close(tip_index); 5 type0; 6 } 7 }) …

mysql数据库连接时区设置_springboot 连接数据库之时区设置

抽空查看以前的开发日志,发现了一些“问题”日志,决定整理后陆陆续续发出来吧,也为有需要的话小伙伴提供点帮助。在springboot启动之时,报错了,一看应该就是连接MySql数据库时出的问题。create connection SQLExceptio…

【HTML基础】表格和表单

本次博客的主要内容如下: meta和link表格表单 meta和link meta meta的属性有两种:name和http-equiv。 name属性主要用于描述网页内容,对应与网页内容。 1.关键字,当搜索引擎在爬取内容的时候,会根据关键字判断&a…

定义EJB 3.1视图(本地,远程,无接口)

这篇文章将讨论使用批注定义EJB视图的可能方法(最后我将只提到使用EJB部署描述符)。我将重点介绍最新的EJB 3.1视图,这些视图将省略旧的本地,远程和本地接口。 因此,我们可以选择: 远程业务界面视图&#…

小鱼的数字游戏

题目描述 小鱼最近被要求参加一个数字游戏,要求它把看到的一串数字(长度不一定,以0结束,最多不超过100个,数字不超过2^32-1),记住了然后反着念出来(表示结束的数字0就不要念出来了)。这对小鱼的…

iview给radio按钮组件加点击事件

<RadioGroup v-model"formValidate.phone"><Radio label"phone">商家电话</Radio><Radio label"leaderPhone">负责人电话</Radio><span click"inputPhone()"><Radio label"newPhone"…

python json 不好用_Python之json使用

一、概念json是一种通用的数据类型&#xff0c;任何语言都认识接口返回的数据类型都是json长得像字典&#xff0c;形式也是k-v { }其实json是字符串字符串不能用key、value来取值&#xff0c;要先转成字典才可以格式如下&#xff1a;{"error_code": 0,#要使用双引号&…

jstack命令(Java Stack Trace)

转&#xff1a;http://blog.csdn.net/fenglibing/article/details/6411940 JDK内置工具使用 一、javah命令(C Header and Stub File Generator) 二、jps命令(Java Virtual Machine Process Status Tool) 三、jstack命令(Java Stack Trace) 四、jstat命令(Java Virtual Machine …

EJB继承与Java继承不同

尽管EJB继承有时使用Java继承&#xff0c;但它们并不总是相同的。 就像您在我以前的文章中可以读到的那样 &#xff0c;EJB不必实现任何接口即可公开业务接口。 另一种方法也是正确的-仅仅是因为EJB实现了某个接口或扩展了其他EJB并不意味着它公开了全部或任何视图。 假设我们…

信号量

信号量Semaphore初探 1.信号量(Semaphore)简述 信号量Semaphore是java.util.concurrent包下一个常用的同步工具类,他维护了一个许可集,可以理解成资源数,可以通过aquire操作来获取一个资源, 并通过release来释放一个资源,但需要注意的是,release来释放资源前不一定要先通过acqu…

(2017.9.27) 自定义列表项 list-style 使用心得

今天给某公司做招聘专页。早上完成设计图&#xff0c;下午开始排版。页面套用了我之前做的某人才局的招聘页面&#xff0c;导航栏、banner 很快就出来了。这次内容里我有些地方用了列表&#xff0c;当然要用 <ul> <li> 标签。列表项&#xff08;小圆点&#xff09;…

链式存储mysql_链栈:栈的链式存储结构

前面讲完了栈的顺序存储结构&#xff0c;我们现在来看看栈的链式存储结构&#xff0c;简称为链栈。链栈是没有附加头结点的运算受限的单链表。栈顶指针就是链表的头指针。栈是用栈顶来做插入和删除操作&#xff0c;那么对于链栈的栈顶放在链表的头部还是尾部呢&#xff1f;单链…

树状数组 学习笔记

树状数组可以用来求区间元素的和。与前缀和做法不同&#xff0c;它支持值的修改。比如说&#xff0c;现在我有一个数列a&#xff0c;要求你维护这个数列&#xff0c;使其支持两个操作。1.改变数列第k项的值2.查询从第i项到第j项的总值暴力做法总是过不了所有点的&#xff0c;如…

使用Spring Security添加RememberMe身份验证

我在“ 将社交登录添加到Jiwhiz博客”中提到&#xff0c;RememberMe功能不适用于Spring Social Security。 好吧&#xff0c;这是因为该应用程序现在不通过用户名和密码对用户进行身份验证&#xff0c;并且完全取决于社交网站&#xff08;例如Google&#xff0c;Facebook和Twit…

iOS动画-从UIView到Core Animation

首先&#xff0c;介绍一下UIView相关的动画。 UIView普通动画&#xff1a;[UIView beginAnimations: context:];[UIView commitAnimations]; 动画属性设置&#xff1a; 1 //动画持续时间2 [UIView setAnimationDuration:(NSTimeInterval)];3 //动画的代理对象4 …

视觉表现理论知识

本文地址&#xff1a;http://www.cnblogs.com/veinyin/p/7606714.html 终于可以知道视觉表现的实现方式&#xff0c;而不是一个一个的具体实现了&#xff0c;突然感到自己能够把握页面的整体布局了呢&#xff0c;似乎学到了表现背后的东西&#xff1f; 以下是一个突然发现自己…

java jnlp_java – 调试JNLP启动应用程序

解决方案#1 – 启用Java控制台,并查找异常.您可以通过Java控制面板完成.切换到“高级”选项卡,然后在Java控制台中确保选中“显示控制台”.然后,运行您的应用程序并监视控制台以查找异常.修复异常.解决方案#2 – 调试正在运行的应用程序(正确).像这样启动Web Start应用程序(适用…

201621123055《JAVA程序设计》第三周学习总结

1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词。 答&#xff1a;类、对象、关键字等。1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来。(注&#xff1a;首次使用&#xff0c;不太会用软件&#xff09; 2. 书面作业 1.以面向对象方式改造数据结构…