【CSS】div 经验分享：CSS浮动(float,clear)通俗讲解

1、div內容溢出

.remark-div {
    overflow: auto;
    height: auto;
    max-height: 100px;
}

一、溢出

　　overflow :auto时，内容超过指定高度会出现滚动条

　　overflow：hidden时，不显示超过对象（div）尺寸的内容

二、须要設置高度

　　max-height 設置一個最大的高度，超過則顯示滾動條；

　　height:auo，不超過設置的最大高度時，讓內容自動決定高度。

 

2、div相互重叠

一、上下重叠

要么清除浮动，要么设置“div”高度，通常状况下文字内容不肯定多少 就不能设置固定的高度，

因此通常不能设置“.div”高度(固然能肯定内容多高，这种状况下“.div”是能够设置一个高度便可解决覆盖问题。)。

清除浮动有两种方法

• clear

.clear{ clear:both} 
<div class="boxa"> 
    <div class="boxa-l">内容左</div> 
    <div class="boxa-r">内容右</div> 
    <div class="clear"></div> 
</div> 

• overflow:hidden

　　对“.boxa”（子级有浮动的父级盒子加overflow:hidden）

 

 二、左右重叠

　　要么都不使用浮动；

　　要么都使用float浮动；

　　要么对没有使用float浮动的DIV设置margin样式。

好比这里“.aa”对应盒子会固定宽度为300px;这个使用对“.bb”对应盒子设置margin-left:302px（大于300便可，本身测试设置须要的值）实现不重叠覆盖现象。

3、CSS浮动与清除浮动

• CSS浮动

一、首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流（标准流）。

二、浮动的出发点是：“如何在一行显示多个div元素”。

       显然标准流已经没法知足需求，这就要用到浮动。      

       浮动能够理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

三、假如某个div元素A是浮动的，若是A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(若是一行放不下这两个元素，那么A元素会被挤到下一行)；若是A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部老是和上一个元素的底部对齐。

       div的顺序是HTML代码中div的顺序决定的。

       靠近页面边缘的一端是前，远离页面边缘的一端是后。

四、元素浮动以前，也就是在标准流中，是竖向排列的，而浮动以后能够理解为横向排列。

参考：经验分享：CSS浮动(float,clear)通俗讲解

• 清除浮动

 语法：clear : none | left | right | both

 取值：

       none  :  默认值。容许两边均可以有浮动对象

       left   :  不容许左边有浮动对象

       right  :  不容许右边有浮动对象

       both  :  不容许有浮动对象

  对于CSS的清除浮动(clear)，必定要牢记：这个规则只能影响使用清除的元素自己，不能影响其余元素。

看一个例子：

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

View Code

这里我没有给最外层的DIV.outer 设置高度，可是咱们知道若是它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。可是当内层元素浮动后，就出现了一下影响：

    （1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示

添加新的元素以清除浮动 、应用 clear：both；

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

View Code

结果：

 

4、用div写一个方框

效果以下：

 

代码：

 <div style="width:20px;height:20px;border:solid 2px;float:left">
        </div>
        <div style="margin-left:40px;">
            本人謹表明本人
</div>

View Code