一篇文章带你了解CSS clear both清除浮动

开发 前端
CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,就用clear样式属性即可实现。

[[358489]]

 一、前言

CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,就用clear样式属性即可实现。

二、clear语法与结构

1. clear语法

  1. clear : none | left|right| both 

2. clear参数值说明 

3. clear解释

该属性的值指出了不允许有浮动对象的边情况,对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。

4. css结构

  1. div { 
  2.                 clear: left 
  3.             } 
  4.  
  5.             div { 
  6.                 clear: right 
  7.             } 
  8.  
  9.             div { 
  10.                 clear: both 
  11.             } 

三、div clear常用的情况

最常用是使用clear:both清除浮动。

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

四、案例

1. 案例说明

设置一个css宽度(css width)为500px; 盒子(div ),css边框(css border)为红色,css背景(css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度、css height为150px。

这样来观察案例效果,看浮动产生并使用clear清除浮动。

css代码:

  1. .div css5 { 
  2.                 width: 500px; 
  3.                 background: #000; 
  4.                 border: 1px solid #F00; 
  5.                 padding: 10px 
  6.             } 
  7.  
  8.             .div  css5_left, 
  9.             .div  css5_right { 
  10.                 border: 1px solid #FFF; 
  11.                 background: #999; 
  12.                 width: 200px; 
  13.                 height: 150px 
  14.             } 
  15.             /* css注释:这里为了截图分别,对css代码换行 */ 
  16.  
  17.             .div  css5_left { 
  18.                 floatleft 
  19.             } 
  20.             /* css注释:设置浮动靠左 */ 
  21.  
  22.             .div  css5_right { 
  23.                 floatright 
  24.             } 
  25.             /* css注释:设置浮动靠右 */ 

html代码片:

  1. <div  class="div css5"
  2.             <div  class="div css5_left">float left盒子</div   > 
  3.             <div  class="div css5_right">float right盒子</div   > 
  4.         </div> 

 案例效果截图


2. 清除浮动方法

在css代码中加入CSS代码:

  1. .clear{ clear:both} 

Html代码中“.div css5”盒子*结束标签前加入代码:

  1. <div  class="clear"></div> 
 清除浮动效果图:

五、总结

本文基于Html基础,介绍了在实际开发中,可以使用clear可以清除float产生的浮动。在使用clear样式对象加入位置,只需要在此对象div标签结束前,加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动。采用代码加截图的方式,希望能够更好的帮助你学习。

 

责任编辑:姜华 来源: IT共享之家
相关推荐

2020-11-03 19:18:28

CSS对齐文本

2021-05-31 09:30:36

Css前端CSS 特效

2021-04-07 06:11:37

Css前端CSS定位知识

2021-01-25 05:39:54

Css前端Border

2021-06-30 00:20:12

Hangfire.NET平台

2023-05-12 08:19:12

Netty程序框架

2020-11-17 11:10:21

CSS选择器HTML

2020-11-27 08:51:29

CSSOpacity透明度

2023-08-01 14:34:12

HTMLCSS

2023-06-28 15:04:59

CSSHTML

2022-03-04 09:31:41

CSS前端属性选择器

2021-05-20 09:02:59

CSS单位长度

2022-02-15 09:31:43

透明度CSS

2023-09-06 14:57:46

JavaScript编程语言

2024-04-19 14:23:52

SwitchJavaScript开发

2023-07-30 15:18:54

JavaScript属性

2021-09-27 09:18:30

ListIterato接口方法

2023-05-08 08:21:15

JavaNIO编程

2020-12-08 08:09:49

SVG图标Web

2024-01-30 13:47:45

点赞
收藏

51CTO技术栈公众号