在网页的布局过程中，经常会用到float属性来实现页面的左右布局，但是有个问题就是父元素的高度并不能根据子元素的高度自适应。比如下面这段代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>title</title>

</head>

<body>

    <div align="center" style="border: 1px solid blue;">

        p

        <div style="float:left;width:45%;height:200px;border: 1px solid green;">

            left

        </div>

        <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div>

    </div>

</body>

</html>

　　在浏览器中查看效果如下：

　　在有些情况下，我们需要父元素能够根据子元素的高度进行自适应，这时候你只需要给父div加个overflow:hidden就可以了。譬如：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>title</title>

</head>

<body>

    <div align="center" style="border: 1px solid blue;overflow:hidden;">

        p

        <div style="float:left;width:45%;height:200px;border: 1px solid green;">

            left

        </div>

        <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div>

    </div>

</body>

</html>

　　这样父元素的高度就能根据子元素的高度自适应了。在浏览器中查看效果如下：

使用float属性布局时父元素高度不能自适应的解决方法的更多相关文章

  1. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  2. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  3. float过后 高度无法自适应的解决方法

    float过后 高度无法自适应的解决方法: 在float层最外面包一层div即可.

  4. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  5. 父元素高度不确定，子元素左右等高的div布局

    上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...

  6. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  7. CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  8. CSS父元素高度随子元素高度变化而变化

    <html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...

  9. 给HTML页面指定元素添加属性，添加父元素

    给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img   此处用到querySelectorA ...

随机推荐

  1. a:hover span 隐藏/显示 问题

    :hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单.相册效果等等. 或许用了这么久的伪类:hover,还有部分朋友还不完全了解ho ...

  2. React-Native个人信息界面

    最近在做一个小练习项目,用户登陆后需要跳转到用户登录信息界面,加班半个小时终于将界面的布局搞定.接触Rect-Native也有一段时间了,以前没有做过ios,只做过android,就布局和开发效率上来 ...

  3. C#实现WinForm传值实例解析

    C#实现WinForm传值的问题经常会做为公司面试的题目,那么作为学习C#以及WinForm传值,我们需要掌握哪些方法和思路呢?下面我们就向你介绍详细的思路和实现的具体步骤,希望对你有所帮助. C#实 ...

  4. Android之日期及时间选择对话框

    转:http://www.cnblogs.com/linjiqin/archive/2011/03/10/1980215.html main.xml布局文件 <?xml version=&quo ...

  5. GoEasy实现web实时推送过程中的自动补发功能

    熟悉GoEasy推送的朋友都知道GoEasy推送实现web实时推送并且能够非常准确稳定地将信息推送到客户端.在后台功能中查看接收信息详情时,可有谁注意到有时候在发送记录里有一个红色的R标志?R又代表的 ...

  6. 纯Html+Ajax和JSP两者对比的个人理解

    最近写个人web,用jsp+servlet做,突然想到一个问题:html+ajax似乎和jsp实现效果一样:那么,两者到底有什么区别呢? 这里参考老猿的一段话: 全站ajax会维护大量的js代码,如何 ...

  7. C++程序设计实践指导1.7超长数列中n个数排序改写要求实现

    改写要求1:将以上程序改写为适合超长整数 改写要求2:将以上程序改写为适合超长数列 改写要求3:将数列中指定位置m开始的n个结点重新按降序排序 改写要求4:输出指定位置m开始的n个结点的超长整数 #i ...

  8. 在vs.net c#中添加mysql模型

    http://weblogs.asp.net/gunnarpeipman/getting-mysql-work-with-entity-framework-4-0 http://dev.mysql.c ...

  9. mysql中select into 和sql中的select into 对比

    现在有张表为student,我想将这个表里面的数据复制到一个为dust的新表中去.answer 01: create table dust select * from student;//用于复制前未 ...

  10. SimpleDateFormat的使用

    SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (date -> text).语法分析 (text -> date)和标准化. 下面是个小 ...