clear:both的理解

<div style=”border:2px solid red;“>

    <div style=”float:left;width:80px;height:80px;border:1px solid blue;“>TEST DIVdiv>

    <div style=”clear:both;“>div>

div>

 

将此部分代码放到一个HTML页面看效果,然后在去掉<div style=”clear:both;“>div>看一下效果

 

如图:

 

1)有clear:both的:

你真的理解clear:both吗?

 

2)无clear:both

你真的理解clear:both吗?

 

这样看,应该就一目了然了:原来后边的Clear:both;其实就是利用清

除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s