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)


相关推荐

  • java.lang.noclassdeffounderro_cannot resolve reference to bean

    java.lang.noclassdeffounderro_cannot resolve reference to bean1.首先创建项目选择版本号跟要导入的包创建项目之后,导包的时候出现了问题找了半天问题我发现是spring-cloud-starter-netflix-eureka-server默认的版本号太高,然后去Maven仓库换了个版本低的,就是下面这个<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netfl

  • 解决微信H5获取SDK授权报错提示errMsg: “config:fail,Error: 系统错误,错误码:63002,invalid signature [20200908 22:17:17][]“

    解决微信H5获取SDK授权报错提示errMsg: “config:fail,Error: 系统错误,错误码:63002,invalid signature [20200908 22:17:17][]“如果常规检查都做过可以仔细看下https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Global_Return_Code.html这个里面的报错原因如果都不是那么极有可能是(看样子你的H5页面日活人数还蛮多[呲牙])获取腾讯微信平台access_token超过每日默认上限2000次导致无法获取本地地理信息坐标,通常会报错errMsg:”config:fail,Error:系统错误,错误码:63002,invali…

    2022年10月31日
  • QTabWidget样式表右侧_qt qwidget

    QTabWidget样式表右侧_qt qwidget1、QTabWidget模型,来自于网络:2、样式设置:this->setStyleSheet(“QTabWidget::pane{border-width:1px;border-color:rgb(48,104,151);\border-style:outset;background-color:rgb(132,171,208);\background:transparent;}\QTabW.

  • 云服务器和虚拟主机有什么区别?区别大吗?

    云服务器和虚拟主机有什么区别?区别大吗?云服务器和虚拟主机有什么区别?区别大吗?如今云服务器和虚拟主机已经成为众多企业和个人建站的必选之一,两者其实各有各的优点,云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务,用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器。它的好处是可独立分配CPU、内存、带宽等资源。而虚拟主机,是将一台服务器分割成若干相对独立的主机的技术。每台切割出的主机在功能上都可以实现WWW、FTP、Mail等基本的Internet服务,跟独立的主机几乎一样,但是这台服务器上所有的用户共享一个IP。下面赵一

  • 超给力的博客园皮肤 Awescnb 来袭 !附更换皮肤步骤

    超给力的博客园皮肤 Awescnb 来袭 !附更换皮肤步骤Awescnb博客园皮肤Awescnb是一款基于vite和webpack5,构建、安装、切换的博客园皮肤。界面简单干净,集成到Cnblog步骤也十分简便,只需要几步就能在你的博客园快

  • git 常用命令大全

    git 常用命令大全

发表回复

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

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