浮动布局float(随意通俗篇)

在写了flex布局这篇文章后,我就特别想写一下float的使用,也想写一下较新的display:grid。grid以后突然想写了再写。先来一篇大话版float布局。


1、css布局得5种形式:

1、默认文档流方式:以默认的HTML元素的结构的顺序显示

2、浮动布局方式:通过HTML元素的float属性显示

3、定位布局方式:通过设置HTML元素的position属性显示

4、flex布局方式:使布局简单、自适应(响应式)

5、grid布局方式:类似flex布局,甚至比flex更简单,不过对浏览器的兼容性更差

2、什么是float?

浮动是将该块元素从原来的文档流模式中分离出来,它后面的对象,就视它不存在,从而占领它的位置。

常用的布局效果,例如,在一行中,显示几个块元素,就全部元素都用float(用flex或者grid就来得非常简单)。

注意:

        1、浮动到的位置是它的父元素的位置,如:在li标签中使用float,则浮动到的位置是ul的位置;

        2、在IE6下,当父元素中的子元素的高度超过了父元素的高度,则子元素会把父元素的高度撑大到子元素的高度。

float属性的属性值:

       1、none  //不浮动

       2、left  //元素向左浮动,而后面的内容流向对象的右侧

       3、right  //对象向右浮动,而后面的内容流向对象的左侧

3、清除浮动clear

当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现布局错乱现象,可以通过清除浮动的方式来解决浮动元素的影响。

对父元素的影响:

     1、当子元素浮动时,父元素不再具有独占一行的能力,后面的元素会跑上来和它重叠,所以它下面的元素必须要加清除浮动clear:both;

     2、当子元素都是float时,父元素的高度就不能自动适应子元素的高度而自动增减高度来适应,从而导致父元素的内容消失。

解决方案:

    1、直接在最下面加入一个空的子元素块(<div style='clear:both'></div>)

    2、在父元素中设置overflow:hidden;

          css中溢出的使用overflow:设置当对象的内容超过其指定的高度及宽度时,进行管理值:

          overflow:visible;  //默认值,不剪切内容,也不添加滚动条

          overflow:auto; //在必须时,对象内容才会被剪切或者显示滚动条

          overflow:hidden;  //不显示超过对象尺寸的内容

          overflow:scroll;  //总是显示滚动条

    3、用伪类after,在问题6中解析(最下面)

实质作用原理:

  1、当(元素A)clear:left时,会把前面的(B元素)属性float:left,视为存在(即B元素的独立行起作用),元素A只能在元素B的下一行,不能浮到B的位置(重合)

  2、当(元素A)clear:right时,会把前面B元素属性float:right,视为存在(即B元素的独立行起作用),元素A只能在元素B的下一行

  3、只有clear:left对应float:left; clear:right对应float:right一一对应时,才起作用,否则都不起清除作用

  4、当clear:both时,就是不管float:(left||right),清除都起作用

clear属性的4个属性值:none、left、right、both


对float浮动的领悟:

         float有三个值:none、left、right(不浮动、向左浮动、向右浮动);使用浮动时,整个元素块就会脱离文档流,也会脱离出该元素的父元素包含的范围,成为独立元素块,但该元素块不会影响它前面的元素块,但会影响它的父元素和父元素后面的兄弟元素、该元素下面的兄弟元素。

        解决问题的本质是:把float的元素块控制在父元素的内部,使浮动效果只在父元素内。有两种方法:

       1、父元素使用overflow:hidden、auto、scroll。 原理是:对父元素的子元素进行计算,判断是否有超出父元素的大小,这样就会促使对float元素计算在内,使float元素块被控制在父元素内,不会脱离父元素的范围,依然是父元素的一部分。这样就只是在父元素内float,父元素外依然是正常流分布。

       2、在float元素的下一个兄弟元素内使用clear:both;是该兄弟元素认为float元素依然存在正常文档流中,这样也起到和上面1相同的作用。

      目的:让float元素块控制在父元素的范围内,成为父元素的一部分,只在父元素内部起到浮动作用。不会脱离父元素的包围范围内。


4、解决原来在同一行上的块元素,因为浏览器窗口的大小改变,而改变位置(flex和grid就不会)

原来的样子:


原来的样子

窗口改变后的样子:


窗口改变后的样子

解决方案:只需要加一个大的块元素把两个块元素包含在一起


5、解决块元素的水平居中的方法(div水平居中)

直接加: margin:0 auto;(外边距margin:左右自动auto),但必须给该元素加必要的宽度width;

注意:当出现浮动float时,通过margin:0 auto;就不起作用了

如:{

       margin:0 auto; //水平居中就不起作用了

       float:left;

}

6、块元素的定位:position

设置对象的定位方式

属性值:

1、static :静态定位,页面中的每一个对象的默认值。

2、absolute:绝对定位,将对象从文档流中分离出来,通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象,则依据body对象。如:{ position:absolute;  top:100px;   left:100px;}

注意:

    父元素加定位属性,一般使用position:relative; 否则子元素不认父元素,认上层带有position:relative的元素为父元素,除非子元素只用position:absolute;不用到left、right、top、bottom属性

3、relative:相对定位,原来对象不从文档流中分离,通过设置left、right、top、bottom四个方向相对自身位置进行定位,但定位到新位置后就是从原来文档流分离出来(新位置分离,原位置还占领着)

7、利用伪类对象after方法:必须要有content:""属性,用在父元素中

      定义一个类,使用伪对象after,控制浮动元素的影响,清除浮动代码如下:

.clearFix:after{

         clear:both;

         display:block;

         visibility:hidden;

         height:0;

         line-height:0;

         content:"";

}

推荐阅读更多精彩内容