您现在的位置是：网站首页> 编程资料编程资料

使用CSS的overflow属性防止float撑开div的方法css 设置overflow:scroll 滚动条的样式 CSS中overflow-y: visible;不起作用的原因分析及解决方法深入理解CSS overflow:hidden——溢出,坍塌,清除浮动css中text-overflow属性与文本截断详解详解CSS中zoom属性或overflow:auto属性清除浮动的作用CSS属性text-overflow的使用问题使用CSS隐藏元素滚动条的示例代码css 给div添加滚动并隐藏滚动条

2021-09-05 1019人已围观

简介 我们在使用float设定浮动元素的时候经常会遇到撑破div的情况,其中一种解决方法即是利用overflow: hidden,这里我们就来看一下使用CSS的overflow属性防止float撑开div的方法:

许多应征前端工程师的人，在面试时都会被问到这类float的问题。
例如：div元素内的两个子元素p都float:left，外面的div会变成没有高度，此时该怎么办呢？
通常解法是在排版流里面的元素加一个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 floatedp>  
  4.     <p>So am Ip>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. }  

效果如下：
201677113114643.jpg (544×119)

在content中添加一个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. }  

就会变成这个样子：
201677113138628.jpg (592×127)

div1标签确实右对齐了，但是并没有撑起content标签的高度。
莫着急，我们需要设置一个属性，就是给content标签，添加overflow属性

添加属性 (overflow: hidden;)

CSS Code复制内容到剪贴板
  1. .content {   
  2.     border: 1px solid red;   
  3.     overflow: hidden;   
  4. }  

添加完之后，效果就成了这样
201677113202738.jpg (592×116)

上一篇：CSS隐藏页面元素的5种方法css 元素显示隐藏的9种思路使用CSS隐藏元素滚动条的示例代码CATIA装配体中的所有参考元素怎么隐藏?CSS“隐藏”元素的多种方法的对比隐藏 Web 中的元素方法及优缺点教程详解

下一篇：CSS的clear属性清除浮动的基本用法示例CSS3 清除浮动的方法示例CSS清除浮动float的三种方法小结清除css浮动的三种方法小结详解css清除浮动float的七种常用方法总结和兼容性处理浅谈css中浮动和清除浮动带来的影响CSS清除浮动方法小结详解CSS中zoom属性或overflow:auto属性清除浮动的作用关于清除浮动塌陷的几种方法总结浅谈css清除浮动(clearfix和clear)的用法浅谈CSS中的clear清除浮动

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网