css樣式的清除浮動

css樣式清除浮動

1.css樣式中的float浮動

css樣式的float浮動屬性，用於設定標籤物件（如：

標籤盒子、

標籤、標籤、標籤、html標籤）的浮動布局，浮動也就是我們所說標籤物件浮動居右靠右（float：right）和浮動居左靠左（float：left），文字靠左（text-align:left）文字靠右（text-align:right）

float的作用

通過css定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動

clear清除浮動

1、clear語法

clear：none|left|right|both

2、clear引數值說明

none：允許兩邊都可以有浮動物件

both：不允許有浮動物件

left：不允許左邊有浮動物件

right：不允許右邊有浮動物件

3、clear解釋

clear屬性的值指出了不允許有浮動物件的邊情況，又物件左邊不允許有浮動、右邊不允許有浮動、不允許有浮動物件。

4、css結構

divdiv

div當我們使用float css樣式後產生浮動，最常用是使用clear：both清除浮動。比如乙個物件裡有兩個小物件使用了css float樣式為了避免產生浮動，大物件的背景或邊框不能正確顯示，這個時候我們就需要clear：both清除浮動。

css使用偽元素清除浮動

1、偽元素

插入偽元素:before :after

2、利用偽元素清除浮動

.clearfix::after

.clearfix::before

3、css使用偽元素清除浮動

原理：在html中每乙個標籤後都會存在前後節點::before、::after，前後節點設定乙個塊狀空元素來清空容器的浮動效果

.clearfix::after

同時在這裡display和visibility的區別是：前者不會占用頁面空間，後者會占用頁面空間。