DIV+CSS clear both清除产生浮动

我不是女神ヾ 2023-07-23 04:58 4阅读 0赞

我们知道有时使用了[css float][]浮动会产生[css浮动][css float]，这个时候就需要清理清除浮动，我们就用**clear**样式属性即可实现。

接下来我们来认识与学习**[css][] clear**知识与用法。

**clear清除浮动目录**

1.  [clear语法与结构][clear]
2.  [div clear常用地方][div clear]
3.  [css+div案例][css_div]
4.  [DIVCSS5总结][DIVCSS5]

### 一、clear语法与结构   -   [TOP][] ###

**1、clear语法：**  
clear : none | left|right| both  
  
**2、clear参数值说明：**  
none : 　允许两边都可以有浮动对象  
both : 　不允许有浮动对象  
left : 　不允许左边有浮动对象  
right : 　不允许右边有浮动对象  
  
**3、clear解释：**  
该属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。

**4、css结构**  
[div][css]\{clear:left\}  
div\{clear:right\}  
div\{clear:both\}

### 二、div clear常用地方   -   [TOP][] ###

我们常常用于使用了float css样式后产生浮动，最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动，大对象背景或边框不能正确显示，这个时候我们就需要clear:both清除浮动。

### 三、css+div案例   -   [TOP][] ###

DIVCSS5案例说明：这里设置一个[css宽度][css 1]（[css width][css 1]）为500px;盒子，[css边框][css 2]（[css border][css 2]）为红色，[css背景][css 3]（[css background][css 3]）为黑色、[css padding][]为10px盒子，里面包裹着2个小盒子，一个css 浮动靠右（[float:right][css float]）、一个css float靠左（[float:left][css float]）,两者边框为白色，[背景颜色][Link 1]为灰色,宽度为200px,[css高度][css 4]([css height][css 4])为150px。这样我们来观察案例效果，看浮动产生并使用clear清除浮动。

**1、案例[css代码][css 5]：**

.divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px} 
    .divcss5_left,.divcss5_right{ 
    border:1px solid #FFF;background:#999;width:200px;height:150px 
    } 
    /* css注释： 这里为了截图分别，对css代码换行 */ 
    .divcss5_left{ float:left}/* css注释： 设置浮动靠左 */ 
    .divcss5_right{ float:right}/* css注释：设置浮动靠右 */

**2、案例[html代码][html]片段：**

<div class="divcss5"> 
        <div class="divcss5_left">float left盒子</div> 
        <div class="divcss5_right">float right盒子</div> 
    </div>

**3、案例效果截图**

![float浮动产生与清除案例截图][float]

[css div][css]浮动产生与清除案例截图

这个时候需要clear来清除浮动，让[css命名][css 6]为“divcss5”盒子撑开。

**4、清除浮动方法**

**我们在css代码中加入CSS代码：**

.clear\{ clear:both\}

**[Html][]代码中“.divcss5”盒子**[**</div>**][div]**结束标签前加入代码：**

<div class="clear"></div>

[css float]: http://www.divcss5.com/rumen/r93.shtml
[css]: http://www.divcss5.com/
[clear]: http://www.divcss5.com/rumen/r424.shtml#no1
[div clear]: http://www.divcss5.com/rumen/r424.shtml#no2
[css_div]: http://www.divcss5.com/rumen/r424.shtml#no3
[DIVCSS5]: http://www.divcss5.com/rumen/r424.shtml#no4
[TOP]: http://www.divcss5.com/rumen/r424.shtml#top
[css 1]: http://www.divcss5.com/rumen/r119.shtml
[css 2]: http://www.divcss5.com/rumen/r120.shtml
[css 3]: http://www.divcss5.com/rumen/r125.shtml
[css padding]: http://www.divcss5.com/rumen/r418.shtml
[Link 1]: http://www.divcss5.com/jiqiao/j369.shtml
[css 4]: http://www.divcss5.com/rumen/r123.shtml
[css 5]: http://www.divcss5.com/rumen/r95.shtml
[html]: http://www.divcss5.com/html/h393.shtml
[float]: /images/20230528/fb290aee6a8342b0b2a0a76877855d5f.png
[css 6]: http://www.divcss5.com/jiqiao/j4.shtml
[Html]: http://www.divcss5.com/html/
[div]: http://www.divcss5.com/html/h121.shtml