在写了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:"";
}
网友评论