div style clear both_that’s all right

div style clear both_that’s all right前言:    感觉是刚过春招,又要开始秋招,对于技术渣渣、学历普通的我,忧愁再次降临。开始准备秋招路途中……来温故而知新,沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right,平时只用到clear:both,好像也只见到这个,这就尴尬了。一、什么是浮动,标准文档流又是个啥    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言:

       感觉是刚过春招,又要开始秋招,对于技术渣渣、学历普通的我,忧愁再次降临。开始准备秋招路途中……来温故而知新,沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right,平时只用到clear:both,好像也只见到这个,这就尴尬了害羞


一、什么是浮动,标准文档流又是个啥

       所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。

      当前所知的脱离文档流的方式有两种:浮动和定位

      在了解什么是浮动之前,   首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。我们看看下面的效果:

div style clear both_that's all right

      可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。以上这些理论,是指标准流中的div。无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。

       显然标准流已经无法满足需求,这就要用到浮动。      

       浮动可以理解为让某个div元素脱离标准文档流,漂浮在标准文档流之上,和标准文档流不是一个层次。

      例如,假设上图中的div2左浮动(float:left),那么它将脱离标准文档流,但div1、div3仍然在标准文档流当中,所以div3会自动向上移动,占据div2的位置,重新组成一个流。如图:

div style clear both_that's all right

       从图中可以看出,由于对div2设置左浮动(float:left;),因此它不再属于标准文档流,div3自动上移顶替div2的位置,div1、div3、div4依次排列,成为一个新的流。又因为浮动是漂浮在标准流之上的,因此div2挡住了一部分div3,div3看起来变“矮”了。
       这里div2用的是左浮动(float:left;),可以理解为漂浮起来后靠左排列,右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。
       如果我们把div2采用右浮动,会是如下效果:

div style clear both_that's all right

         此时div2靠页面右边缘排列,不再遮挡div3,读者可以清晰的看到上面所讲的div1、div3组成的流。以上我们看到的是只有一个div设置浮动,那么如果设置多个div浮动,效果又是怎么样呢?

        我设置div2右浮动,div3左浮动,效果如下:

div style clear both_that's all right

       同理,由于div2、div3浮动,它们不再属于标准文档流,因此div4会自动上移,与div1组成一个“新”标准流,而浮动是漂浮在标准文档流之上,因此div2又挡住了div4。

       当同时对div2、div3设置浮动之后,div3会跟随在div2之后,div2在每个例子中都是浮动的,但并没有跟随到div1之后。因此,我们可以得出一个重要结论:
       假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。


2、清除浮动

      目前民间流传的清除浮动方法:

  • clear语法:

        clear : none | left | right | both

  • 取值:

        none : 默认值。允许两边都可以有浮动对象

        left : 不允许左边有浮动对象

        right : 不允许右边有浮动对象

        both : 不允许有浮动对象

        我第一次看到这个定义的想法是,clear: left认为是“清除左浮动”,clear: right是清除右浮动。 定义非常容易理解,但是读者实际使用时可能会发现不是这么回事。

       在理解这个之前,请先记住一句话:“float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!”—来自张鑫旭


       根据上边的基础,我们来看一个简单的例子,假如页面中只有两个元素div1、div2,它们都是左浮动,场景如下:

div style clear both_that's all right

       此时div1、div2都浮动,根据规则,div2会跟随在div1后边,但我们仍然希望div2能排列在div1下边,就像div1没有浮动,div2左浮动那样。

       这时候就要用到清除浮动(clear),如果单纯根据官方定义,读者可能会尝试这样写:在div1的CSS样式中添加clear:right;,理解为不允许div1的右边有浮动元素,由于div2是浮动元素,因此会自动下移一行来满足规则。那我们来试一下刚才说的这个方法,结果还是原来的这个,并没有起到效果,可见这种理解是错误的。

       所以呢,要想让div2下移,就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1,因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素,这样div2就被迫下移一行。实践效果如下:

div style clear both_that's all right

         这样就达到了效果,试想一下,如果两个div都是右浮动,那么要如何实现上下排列呢,也就是div2在div1的下面?

div style clear both_that's all right

         可以看出div2的右边有一个浮动元素div1,那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素,这样div2就被迫下移一行,排到div1下边。

3、具体例子

       解析完了具体的理论知识,来进行实践一下好了。假如现在需要完成下面的效果,大家想想你会用什么布局来实现呢?

div style clear both_that's all right

       我的实现方法是,利用2个div,第一个div中包含头像和姓名,第二个div中包含自我描述,然后第一个div左浮动,第二个div也是左浮动。虽然这种方法实现了这个效果,而且大家也都是这么做的,但是这样写会显得没有那么专业,首先这三个应该是属于平级的,然而用我的实现方法来看,我们分成了2个级。那么要如何用平级实现以上的效果,大家想想就知道啦,既然上文的内容是清除浮动,那么就用这个实现。

     于是代码以及布局如下:

<div style="width:500px;overflow:hidden;_zoom:1;">
    <div style="float:left;width:100px;">头像</div>
    <p style="float:left;clear:left;">姓名</p>
    <div style="margin-left:106px;">自我描述</div>
 </div>


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194782.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 重定向和转发的区别及应用_重定向是什么意思

    重定向和转发的区别及应用_重定向是什么意思请求转发:客户首先发送一个请求到服务器端,服务器端发现匹配的servlet,并指定它去执行,当这个servlet执行完之后,它要调用getRequestDispacther()方法,把请求转发给指定的student_list.jsp,整个流程都是在服务器端完成的,而且是在同一个请求里面完成的,因此servlet和jsp共享的是同一个request,在servlet里面放的所有东西,在stude…

  • Java中的this指针

    Java中的this指针AlienTechforbetterlife!~

  • Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure具体错误信息Causedby:com.mysql.jdbc.exceptions.jdbc4.CommunicationsException:CommunicationslinkfailureThelastpacketsuccessfullyreceivedfromtheserverwas1,548,635,756,564millisecondsago….

  • .h5文件的读取_python读写h5文件

    .h5文件的读取_python读写h5文件**关于hdf5文件**HDF(HierarchicalDataFormat)指一种为存储和处理大容量科学数据设计的文件格式及相应库文件。详见其官方介绍:https://support.hdfgroup.org/HDF5/。Python中有一系列的工具可以操作和使用HDF5数据,这里只介绍h5py。一个HDF5文件是存储两类对象的容器,这两类对象分别为:dataset…

  • pycharm使用技巧及常用快捷键_wps自定义快捷键设置

    pycharm使用技巧及常用快捷键_wps自定义快捷键设置PyCharm自身提供了大量实用的快捷键,但是由于自己之前其他软件的快捷键使用习惯与此不同,这就需要在PyCharm量身DIY属于自己的快捷键了。快来按照下面的流程操作吧!!!1、File—&gt;Settings【Settings的快捷键大家看到了嘛!!!Ctrl+Alt+S】2、Keymap—&gt;齿轮状设置—&gt;Duplicate建议在设置快捷键之前…

  • centos7安装jdk1.8教程(安装包损坏无法安装怎么办)

    在虚拟机中创建两个目录mkdir-p/export/software软件包放置的目录mkdir-p/export/servers软件安装的目录进入/export/software目录,上传jdk的安装包:jdk-8u241-linux-x64.tar.gz解压压缩包到/export/servers目录下tar-zxvfjdk-8u241-linux-x64.tar.gz-C/export/servers查看解压后的目录,目录中有jdk1.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号