实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。
解决方法:一个设置为float:left，一个设置为float:right。
1、完整HTML源代码：
2、两列并排DIV实例截图:
特征：1、浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
2、浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略
3、浮动元素而向上一个任意非浮动元素靠齐
4、浮动元素后面的内联元素会向此浮动元素的外边距靠齐
float造成的影响：
1、对其父元素的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
2、对其兄弟元素（非浮动）的影响
如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层，但它的内部文字和其他行内元素都会环绕浮动元素。如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
3、对其兄弟元素（浮动）的影响
同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
4、对子元素的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
清除浮动指什么 如何清除浮动 两种以上方法
浮动：
浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
清除浮动的方法：
1、添加空的div，对他进行清理：
缺点：增加了一个无意义的标签。
2、BFC清理浮动（BFC详解请看下面）：在父容器中生成BFC。
触发BFC
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
局限性：使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。
3、通用的清理浮动法案
方法1
clearfix{
zoom:1;
}
clearfix:after{
content:"";
display:block;
clear:left;
}
方法2
clearfix{
zoom:1;
}
clearfix:after{
content:"";
display:table;
clear:both;
}
虽然我们得出了一种浏览器兼容的靠谱解决方案，但这并不代表我们一定得用这种方式，很多时候我们的父容器本身需要position：absolute等形成了BFC的时候我们可以直接利用这些属性了，大家要掌握原理，活学活用。总而言之清理浮动两种方式：
1、利用 clear属性，清除浮动
2、使父容器形成BFC
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
1、static：
默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index声明）。当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。
2、relative：
生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。
3、fixed：
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”，那么如果我想让一个元素定位的参照物总是整个文档(viewport)，怎么办呢？答案是使用fixed定位，fixed定位的参照物总是当前的文档。利用fixed定位，我们很容易让一个div定位在浏览器文档的左上，右上等方位。比如你想添加一个信息提示的div，并将该div固定在右上方，你可以使用以下css
element {position：fixed；top：2%；right：2%； }
4、absolute：
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
z-index 有什么作用 如何使用
当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上，那么它们的顺序号就决定了谁上谁下了。
z-index没有单位，z-index：99；这样写就够了和定位一起用，绝对定位才可以触发z-index属性
position:relative和负margin都可以使元素位置发生偏移二者有什么区别？
1、position:relative是相对定位可以使元素发生偏移，但是在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化
2、负margin：通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，所以其他元素的位置发生了变化。
划线定位方式有四种，定位布局共有四种方式：
（1）固定定位（fixed）；
（2）相对定位（relative）；
（3）绝对定位（absolute）；
（4）静态定位（static）。
1、固定定位
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置（在视野中），相对屏幕的可视区进行定位。固定定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器窗口的位置，造成元素完全脱离文档流，改变元素类型，多用于“回顶部”特效和固定栏目的设置。
2、相对定位
当元素的position属性设置为relative时，此时元素便具有相对定位的特性。相对定位的元素，其位置是相对于它的原始位置计算而来的，同样具有top、bottom、left和right这4个属性。相对定位不使元素脱离文档流，不改变元素的本身类型。
3、绝对定位
绝对定位absolute,是定位属性中出场频率最高的一个，一般配合relative使用，真正的实现了“指哪打哪”的效果。一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素“浮”在其他元素上面。绝对定位会改变元素的本身类型（行内元素会变成块元素），其位置如果有定位父级相对于定位父级发生偏移，如果没有定位父级相对于整个文档发生偏移。
4、静态定位
如果没有指定元素的position属性值，元素也就是静态定位。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。这个属性一般很少使用，不支持left、top等属性值，使用场景一般在清除其他定位属性上。
因为DW生成的“层”是“绝对定位”的，而插入的其它元素呢就是“相对定位”的了。不同的浏览器或不同大小的屏幕，都会出你说的那个“错位”。
一般情况下，先不要用“层”（或是全用“层”），这样应该就可以啦，至于说到“解决”这个问题，那你要会看代码和写代码啦。如果要用DW自动生成的“层”，这个问题是解决不了的。如果想要“解决”的话，就要会“相对定位的绝对定位”才行（就是把外层元素设为“相对定位”，把内层元素设为“相对定位”，内层元素就是那个“层”啦。这样就不会有你说的那个错位现象啦）。
如果没说明白或是看不懂的话，你再HI我好啦
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）