提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > float浮动形成父级元素陷落的解决方法【css教程】,float浮动,父级元素塌陷

float浮动形成父级元素陷落的处理要领是:给父元素设置一个高度,在末了的一个子元素后设置一个空div并运用clear消灭浮动,父元素设置overflow:hidden,为父元素增加after伪类

在举行网页规划时,经常会用到float浮动属性,然则当父元素下的子元素设置了浮动就会形成父元素陷落。接下来我们将在文章中为人人细致引见怎样处理因浮动而形成父元素陷落的题目,具有肯定的参考作用,愿望对人人有所协助

【引荐课程:CSS教程

当给一个元素的父元素设置了背景色彩以后,再为子元素设置浮动后会发明父元素的背景色彩消逝了,而且当父元素有一个边框时会发明浮动元素没法将边框撑开。

例:没有给li设置浮动

 <ul style="background: pink;border: 1px solid #ccc">
  <li>ki4网</li>
  <li>ki4网</li>
  <li>ki4网</li>
  <li>ki4网</li>
  </ul>

效果图:

设置了浮动以后

<ul style="background: pink;border: 1px solid #ccc">
  <li style="float: left;list-style: none;">ki4网</li>
  <li style="float: left;list-style: none;">ki4网</li>
  <li style="float: left;list-style: none;">ki4网</li>
  <li style="float: left;list-style: none;">ki4网</li>
  </ul>

效果图

从上图中能够看出当子元素设置了浮动以后,父元素的内容没有被撑开。也就是说元素设置浮动后,就不在全部文档流的统领局限,那末它之前存在在父元素内的高度就跟着浮动不复存在了,而此时父元素会默许自身内里没有任何内容(条件是未给父元素设置牢固高度,假如父元素自身有牢固高度,就不会涌现这类状况)就会发作陷落

父元素陷落处理要领:

(1)给父级元素增加一个高度

此要领中高度没法确认,须要屡次尝试设置

<ul style="height:200px;background: pink;border: 1px solid #ccc">

(2)在末了一个子元素后加一个空的div,给他增加款式clear,消灭两侧浮动;

 <div style="clear:both;"></div>

(3)父级元素设置overflow:hidden;

 <ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">

(4)父级元素增加after伪类;

.parent:after{
content:"";
display:block;
clear:both;
}

总结:以上就是本篇文章的全部内容了,愿望对人人有所协助。

以上就是float浮动形成父级元素陷落的处理要领的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"float浮动形成父级元素陷落的解决方法【css教程】,float浮动,父级元素塌陷"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线