应用CSS的overflow特性避免float撑开div的方式

日期:2021-03-03 类型:科技新闻 

关键词:自助建站免费建站平台,网站的建设服务,自助建站平台,如何自己建网站,怎么建设网站

很多应征前端开发工程项目师的人,在招聘面试时都会被问到这类float的难题。
比如:div元素内的两个子元素p都float:left,外面的div会变为沒有高宽比,此时应该怎么办呢?
一般解法是在排版流里边的元素加1个after的伪元素,将它设成display: block和clear:both便可处理。

CSS Code拷贝內容到剪贴板
  1. div:after {content"";displayblock;clearboth;}  

但是我今日出现意外发现,原先overflow: hidden;也会撑开div呀!以下:
长专业知识了。

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.   <div>  
  3.     <p>I am floated</p>  
  4.     <p>So am I</p></div><style>div {   
  5.     overflow: hidden;}p {   
  6.     float: left;}</style>  

深层次   
让大家再次深层次,看来下面的事例:
撰写以下编码,查询实际效果
HTML编码: 

XML/HTML Code拷贝內容到剪贴板
  1. <div class="content">  
  2.     <div class="div1">  
  3.   
  4.     </div>  
  5. </div>  

CSS编码:

CSS Code拷贝內容到剪贴板
  1. .content {   
  2.     border1px solid red;   
  3. }   
  4. .div1 {   
  5.     width100px;   
  6.     height100px;   
  7.     background-color: cyan;   
  8. }  

实际效果以下:

在content中加上1个div1,并设定了content标识的边框和div1标识的尺寸和色调,看到content标识把div1标识包裹起来了。而且还撑起了content标识的尺寸

但,当大家设定了div1向右波动的特性以后

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width100px;   
  3.     height100px;   
  4.     background-color: cyan;   
  5.     floatrightright;   
  6. }  

就会变为这个模样:

div1标识的确右对齐了,可是并沒有撑起content标识的高宽比。
莫心急,大家必须设定1个特性,便是给content标识,加上overflow特性

加上特性 (overflow: hidden;)

CSS Code拷贝內容到剪贴板
  1. .content {   
  2.     border1px solid red;   
  3.     overflowhidden;   
  4. }  

加上完以后,实际效果就变成这样