css浮动，定位问题解答

1、浮动的元素有什么特征？对父容器及其子元素、普通元素、文字有什么影响？

浮动的元素在不清除浮动的情况下会脱离正常的文档流，将不再文档流中占据位置；
如果浮动的元素为子元素的情况下父元素没有定义固定宽度和高度则父元素降抓取不到浮动的子元素的内容，造成父元素的塌陷；

由于元素浮动后不在占据文档流的位置，所以与其相邻的兄弟元素则会被浮动的元素覆盖，如果兄弟元素也进行了浮动那么将会紧跟在上一浮动元素后面；（如果想让未浮动的兄弟元素覆盖在以浮动的元素上那么久要用到z-index配合定位来解决这个问题）；如果浮动后父元素宽度已经不能容纳浮动后水平的所有子元素的宽度那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住；如果浮动的元素高度不相同当元素下移时下移的元素会卡在高度最小的不下移元素；

对于文字，如果两个兄弟元素第一个进行了浮动，第二个有内容且没有进行浮动那么除了第一个元素将覆盖第二个元素外，第二个元素的文字将会围绕第一个以浮动元素的四周进行显示；

如果一个内联元素浮动后即使清除了浮动，此内联元素就可以设置width，height，margin，padding 值；

2、清除浮动指的是什么？如何清除以及方法？

浮动后的元素需要清除浮动，让原本已经脱离正常文档流的元素重新回归正常文档流当中，避免塌陷；
对于css有一个特定的清除浮动的属性此属性 clear 具有三个常用值分别为：left、right、both；代表清除左边浮动、清除右边浮动、浮动全部清除；一般常用的是clear：both; 此方法可用在最后一个浮动的元素下在增加一行代码来清除：
<div class="big">
<div style="float: left"></div>
<div style="float: left"></div>
<div style="float: left"></div>
<div style=" clear: both;"></div>
</div>

3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景分别是？

常用的positionde的值如下图：

微信截图_20170724100820.png

常用的值有三个分别是：position: relative; position: absolute; position: fixed;
position: relative：使用场景一般为relative可能就要相对于父结点进行定位了一般都是相对定位；
position: absolute：需要把一个元素始终固定在页面的一个位置时使用；
position: fixed：比如有些div悬浮在上方，可能就需要fixed，也就是滚动条移动时不会改变与浏览器的位子；

4、position:relative和负margin都可以使元素位置发生偏移二者区别是什么？

position:relative；是根据元素目前的位置进行定位，利用left,right,top,bottom进行位置的改变是针对元素本身来移动并且原来的位置依然占位；
负margin会把元素上移、左移，同时文档流中的位置也发生相应变化,但是不在占据原来的位置；

css浮动，定位问题解答

推荐阅读更多精彩内容