子级用css float浮动 而父级div没高度不能自适应高度

简介: 子级对象使用css float浮动 而父级div不能自适应高度。   对父级div标签闭合前加一个clear清除浮动对象。 父div不自适应高度实例 .

子级对象使用css float浮动 而父级div不能自适应高度。

 

对父级div标签闭合</div>前加一个clear清除浮动对象。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>父div不自适应高度实例</title> 
    <style> 
    .divcss5{width:500px;border:1px solid #000;padding:10px} 
    .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    .clear{ clear:both} 
    </style> 
    </head> 
    <body> 
    <div class="divcss5"> 
    <div class="divcss5-lf"></div> 
    <div class="divcss5-rt"></div> 
    <div class="clear">对父级div标签闭合div前加一个clear清除浮动对象</div> 
    </div> 
    </body> 
    </html>

 

相关文章
|
3月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
32 4
|
21天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
3月前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
186 1
|
前端开发 JavaScript 容器
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
5天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
|
23天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
下一篇
无影云桌面