合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

浮动元素引起的问题和解决方法

  • 时间:2016-12-14 11:54
  • 发布:合肥达内web培训
  • 来源:企业面试题

浮动元素引起的问题:

(1)父元素的高度无法被撑开,影响与父元素同级的元素

(2)与浮动元素同级的非浮动元素(内联元素)会跟随其后

(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

解决方法: 使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

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

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法:

1,额外标签法,

(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

2,使用after伪类

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

3,浮动外部元素

4,设置`overflow`为`hidden`或者auto

达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择合肥计算机培训,不再孤军奋战,轻轻松松做IT高薪白领。合肥达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ:381809357(合肥达内就业服务部)咨询了解。

上一篇:解释下浮动和它的工作原理和清除浮动的技巧
下一篇:什么是BFC?

前端工程师到底是什么样的呢?

高薪前端具备哪些技能?如何学习前端知识?

怎样使用html5代码实现地理位置介绍

说下如何测试一个新的网站网站

选择城市和中心
贵州省

广西省

海南省