Web前端面試指導(dǎo)(十九)：CSS樣式-如何清除元素浮動？

時間：2023-09-06 19:12:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-06 19:12:02 來源：網(wǎng)站運(yùn)營

Web前端面試指導(dǎo)(十九)：CSS樣式-如何清除元素浮動？：題目點評

本題屬于比較常問的題目，也是在網(wǎng)頁設(shè)計中經(jīng)常遇到的問題，面試官希望通過這樣的面試題來了解你對網(wǎng)頁設(shè)計的基本功底，如果這樣的題目答不出來，必會讓面試官大失所望，面試成功的概率是非常小的。

答題思路

可以先回答在工作上常用的清除方法，并說明為什么使用它，然后在講一些其它的清除方法來說明你的思維廣闊，知識豐富的一面。 浮動的方式有以下4種。


1.使用clear:both清除浮動

示例1：使用div

html代碼

css代碼

<div class="box">

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

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

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}

示例2:使用<br clear="all">

<div class="box">

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

<br clear="all"/>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

示例3：偽類對象::after+zoom:1(推薦使用)

<div class="box clear">

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

</div>

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.使用overflow屬性

html代碼

css代碼

<div class="box">

<div class="div1"></div>

</div>

.box{ width:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}
注意：overflow:auto;、overflow:hidden;都可以

3.使用display屬性

html代碼

css代碼

<div class="box">

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

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中，在父元素使用text-align:center解決

4.父級元素浮動

html代碼

css代碼

<div class="box">

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

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中，可以使用定位解決

position: relative;

left: 50%;

margin-left: -150px;