一篇文章带你了解CSS clear both清除浮动
一、前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,就用clear样式属性即可实现。 二、clear语法与结构 1. clear语法 clear : none | left|right| both 2. clear参数值说明 属性 描述 none 允许两边都可以有浮动对象 bot 不允许有浮动对象 left 不允许左边有浮动对象 right 不允许右边有浮动对象 3. clear解释 该属性的值指出了不允许有浮动对象的边情况,对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。 4. css结构 div { clear: left } div { clear: right } div { clear: both } 三、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