CSS 消除波动Clear

日期:2021-01-20 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

还记得第2课大家做的事例的实际效果么?最终实际效果是,鲜红色方块和蓝色方块都处在1行,大家应用“Float:left”,严厉打击了块状元素的“蛮横霸道”即块状元素不容许别的元素和它处在同1行。大家将鲜红色方块的CSS编码中添加了“Float:left;”后,鲜红色方块终究容许蓝色方块和它处在同1行。如图:

大家换1种方式表述上面的意思,由于鲜红色方块的“左边波动”,才致使蓝色方块上挪到鲜红色方块的尾后;

在上个事例中,以便做到访问器适配性,大家各自在鲜红色蓝色方块CSS编码中分刘海别加了“Float:left;”,这样IE和FF中显示信息实际效果1样,假如此时大家还想放1个宽度400像素,高宽比100的翠绿色方块,并让其处在第2行,实际效果以下图:
 

但是这时候候无论如何放,在IE中的实际效果自始至终是

致使翠绿色拍到蓝色的后边这类状况便是由于蓝色方块CSS编码中含有"Float:left;",可是以便访问器适配性,又不可以去掉(甚么?这句话看不搞清楚,只能表明第2节课你沒有好难学,好好品位!),如何办?
好办~!要是在CSS编码中添加下面这段编码:

拷贝编码
编码以下:

.clear{clear:both;}

并在HTML编码中添加下面编码:

拷贝编码
编码以下:

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

上面这句话到底加在那个部位呢,要加在蓝色方块和翠绿色方块正中间,随后看看实际效果是否大家要想的了~^_^

拷贝编码
编码以下:

<div id="redBlock">blog的左边</div>
<div id="blueBlock">blog的右边</div>
<div class="clear"></div>
<div id="greenBlock">blog的版权信息内容</div>

目地便是以便消除蓝色方块的波动对下面翠绿色方块的危害!是危害哟~是消除危害,而并不是清晰蓝色方块的波动,或说消除蓝色方块的波动对下面地区块造成的功效!(细心品品我说的这句话!)
假如還是不搞清楚,你就在鲜红色方块和蓝色方块正中间再加“<div class="clear"></div>”,看看实际效果变为甚么模样,随后再品品我刚刚说的话!

这节课就到这里,下节课大家做1个导航栏条,很好用的哟!1定要把前3节吃透,要不然第4节会跟不上了解不透!
上一篇:css 单照片按钮案例(css 照片转换) 返回下一篇:没有了