美文网首页
2018-08-19 浮动问题详解

2018-08-19 浮动问题详解

作者: cainter | 来源:发表于2018-08-19 18:08 被阅读0次

    一、文档流

    html标签会根据自身特点(例如div为block标签,有宽高,不管其宽度为多少,在文档流中都是占据一行,span标签为inline标签,只有宽度,没有高度,其在文档流中占据标签大小的空间),有秩序的排列在页面上,其排列的标准是以流式布局的形式,所以称之为文档流。

    二、浮动

    页面的特殊布局中需要个别元素摆脱其自身文档流特点,以需求排列元素位置,脱离文档流的元素排列方式便叫做浮动。例如li标签元素,是列表标签,和div一样属于block标签,但是如果要让li排成一行,就需要让li脱离文档流,添加一个向左的浮动。

    三、浮动应用场景

    1、表单布局,需要多个文本输入框排列在一行上;

    2、规定元素宽度,响应式布局,页面缩小时,元素整个适配到下一行;

    四、浮动问题

    页面布局为:父级div作为容器,其中放置一个ul列表标签,给li宽高和背景颜色,并添加左浮动和左外边距。

    当元素脱离文档流之后,父级容器就无法包裹住元素标签,使得之后的元素排列会出现以下问题:

    1、给父级一个边跨,发现父级边框无法包裹子级元素;

    2、父级div中添加一个div,设置背景颜色并加入文字内容,发现文字高度撑开父级div,背景颜色在浮动li块的下方,但文字却紧跟在li的左侧,没有被浮动的li覆盖。

    3、给子级div宽度和高度,发现文字移到浮动元素的下方,子级div的高度撑开父级div。

    4、继续给子级div添加一个overflow:hidden;样式,隐藏掉超出容器的文字,发现子级div跟随浮动流,紧贴排列在li的后方。

    5、给父级容器添加一个overflow:hidden;样式,发现父级容器可以重新包裹住浮动元素,但是对超出宽度的元素直接隐藏,破坏了布局。

    只设置宽度,不设置高度,overflow为hidden时没太大问题,超出宽度部分的浮动元素,自动流向下一行,但是如果设置了高度之后,便出现问题了。

    6、给父级容器设置浮动样式,父级容器重新包裹住了子级div,并且不会出现裁切内容的现象,但是同样,父级容器便脱离了文档流,成为了浮动流,会对更高层的对布局产生一定的影响。

    可以看到,仅仅设置了float:left;之后,父级容器紧紧的包裹住了子级元素,宽高都被子级元素撑开,脱离的整体的文档流。

    这是设置了宽度和高度之后,超出宽度的子级浮动元素自动排列在下一行,且超出部分不会被裁切掉。

    7、给父级设置绝对定位,与上述类似,只不过因为定义的是绝对定位,可以随意设置其文档位置。

    五、浮动问题分析

    以上可以看出,浮动对页面布局产生的一系列影响。

    解决浮动对布局的影响,首先弄清楚为什么浮动会出现这些问题。

    首先第一个问题很好理解,子级元素浮动之后,脱离文档流,不在属于容器内的元素,所以容器包裹不住标签块,而标签块按照浮动的顺序,依次排列,这种从下面的排列方式也可以看出来浮动流的特点。

    规定了父级容器的宽度之后,超出父级容器的浮动块,会自动排列在第二行,且以第一行元素最大高度为自身的top值。

    关于第二个和第三个问题,文字内容输入浮动流,在接触到浮动元素时,就和上述浮动元素一样,依次排列在前一个浮动元素的后面,容器设置宽度后,超出容器宽度的浮动元素自动另起一行。

    从这里便可以看出,页面元素根据其位置流可以分两种,一种是文档流,一种是浮动流,文档流元素的位置根据元素本身特点排列,浮动流元素则按照浮动流特点进行排列元素。

    4,5,6,7都是一个道理,就是把文档流转换为浮动流,从而使得子级元素和父级容器都以浮动流的形式排列。

    总结一下就是,overflow,position,float都是让元素脱离文档流的属性,变成浮动元素,从而按照浮动流的方式进行布局。

    六、浮动问题解决

    根据对浮动问题的分析,有两种总的方式,一种是破坏文档结构解决浮动问题,这种比较简单,但因为破坏了文档结构,会在布局上留下一些隐患,一种只是通过添加样式来解决浮动问题,相比较而言会复杂一些,但不破坏文档结构。

    (1)破坏文档结构解决浮动问题

    1)添加一个子元素,给子元素设置clear清除浮动;

    添加额外带有clear属性的元素

    clear属性用来清除周围元素浮动,添加的一个带有clear属性的子元素来清除浮动带来的问题,使得父级容器可以重新包裹住子级元素。

    2)给父级容器添加overflow,position,float样式

    三种样式都是使得父级元素也脱离文档流,但是却改变了父级容器在整体布局中的位置,或者改变其子元素的布局方式,为了尽量减少因清浮动带来的问题,三种方式的优先级是position>float>overflow,

    绝对定位position和float只会造成布局困扰,但overflow会改变内容的显示,所以不到万不得已还是不要使用overflow:hidden来清浮动。

    (2)使用伪类样式清除浮动问题

    有两种伪类了解一下:

    :before在元素的开头添加文档信息,一般用于给列表或者表格标签内容的开头,加统一的信息。

    :after在元素的末尾添加文档信息

    关于这两个伪类有很多使用方式,这里只是使用其清浮动而已。

    页面布局为:

    给父级容器添加伪类

    css样式 页面显示

    content中是需要添加的内容,这里不需要添加任何内容,所以字符串为空,display把文字的inline结构改为block结构,然后使用clear清除浮动。

    其实添加伪类的方式和在容器末尾添加额外的带有clear标签元素的方式类似,只不过不用改变原来的文档结构,推荐使用这种方式来清除浮动。

    相关文章

      网友评论

          本文标题:2018-08-19 浮动问题详解

          本文链接:https://www.haomeiwen.com/subject/nfkciftx.html