CSS的基本属性用于清除浮动的一个示例

CSS清除浮动是什么
网络上流行的说法是:在非IE浏览器(如Firefox),当容器的高度(高度)的汽车,和容器的内容是浮动(float左或右)元素,在这种情况下,高度不自动适应容器高度的延伸内容,使从内容到船舶溢出(甚至破坏)现象的布局。这种现象称为浮动溢出。为了防止这种现象的出现,CSS过程被称为CSS来清除浮动。

用清晰的风格清理
Sample:

CSS代码将内容复制到剪贴板。


清晰的浮动{清除:两个;}




清除属性是CSS 1提供的清除浮点数的样式。设置了清晰属性的元素。边界上的位置将紧贴边缘的底部边界位置的浮动元素,忽略其边距设置。这样,当父容器的高度不定(该值是自动),因为清洁浮动样式元素的位置位于浮动元素下,后的容器计算包含浮动元素的实际高度。

例子
添加DIV4的代码和建立一个高300px,灰色的背景颜色,代码如下

HTML代码:

xml代码将内容复制到剪贴板。



DIV4





CSS代码:

CSS代码将内容复制到剪贴板。


{。DIV4
宽度:300px;
身高:300px;
背景颜色:DarkGray;
}




结果如下:


1、DIV4周围是红色的线。你会发现DIV4仍然是从左上角设置一个问题,但文字并不位于左上角。这就是浮球会带来的问题。
2。如果我们想要实现下附格式和对div3右侧DIV4效果,我们还需要设定浮动:为DIV4左属性描述
但我们不想要这种效果。相反,我们要重新安排下DIV4,代替浮DIV1,格式和div3。在这一点上,我们需要清除浮动。

CSS代码将内容复制到剪贴板。


{。DIV4
宽度:300px;
身高:300px;
背景颜色:DarkGray;
清楚:两者;
}




您只需添加清楚:两者;属性,您可以清除浮动。

结果如下:


在浮动的清除,DIV4可以从底部本身设置并不会参与的前几部这就是去除浮浮。