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

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

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

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

CSS Code拷贝內容到剪贴板
  1. div:after {content: "";display: block;clear: both;}  

但是我今日出现意外发现，原先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.     border: 1px solid red;   
  3. }   
  4. .div1 {   
  5.     width: 100px;   
  6.     height: 100px;   
  7.     background-color: cyan;   
  8. }  

实际效果以下：

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

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

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width: 100px;   
  3.     height: 100px;   
  4.     background-color: cyan;   
  5.     float: rightright;   
  6. }  

就会变为这个模样：

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

加上特性 (overflow: hidden;)

CSS Code拷贝內容到剪贴板
  1. .content {   
  2.     border: 1px solid red;   
  3.     overflow: hidden;   
  4. }  

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

上一篇：浅谈css margin重合 返回下一篇：没有了