在网页的布局过程中，经常会用到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. ROI 脚本

    ROI: receiving open interface, 是提供给客户的接口, 通过 ROI 客户能够不通过EBS form 界面做receiving 的动作, 而是通过脚本插入相关的接口表 ( ...

  2. 虚拟化之KVM的安装篇

    1,在安装KVM之前,首先需要在自己的电脑开启cpu虚拟化技术(这个需要BIOS中设置). 如下操作都是在本人虚拟机中设置,所以可以看到我多添加一块磁盘,目的是用来做kvm虚拟机的磁盘. 另外,虚拟机 ...

  3. 更改yum网易 阿里云的yum源。

    一,鉴于用国外的Yum源,速度比较慢,所以想到将国外的yum源,改为国内的Yum源,著名的有网易 阿里云源.如何更改呢? 二,更改yum源为网易的. 首先备份/etc/yum.repos.d/Cent ...

  4. canvas、image src、data url、blob file conversion

    //canvas.toDataURL('image/jpeg'), and convert to blob,blob is a File Object. but UC don't support fu ...

  5. SQL server 2008数据库的备份与还原、分离(转)

    SQL server 2008数据库的备份与还原.分离(转)   一.SQL数据库的备份: 1.依次打开 开始菜单 → 程序 → Microsoft SQL Server 2008 → SQL Ser ...

  6. linux安装perl模块

    查询perl CPAN模块   shell>perl -MCPAN -e shell cpan>install module_name   手动安装perl CPAN模块 从 CPAN(h ...

  7. jsp include 乱码问题的解决

    jsp include 乱码问题的解决 博客分类: Java JSPWeb浏览器IESpring  jsp include 乱码问题的解决 jsp include 的文件有时候会出现乱码,经过测试发现 ...

  8. 【Lucene4.8教程之一】使用Lucene4.8进行索引及搜索的基本操作

    在Lucene对文本进行处理的过程中,可以大致分为三大部分: 1.索引文件:提取文档内容并分析,生成索引 2.搜索内容:搜索索引内容,根据搜索关键字得出搜索结果 3.分析内容:对搜索词汇进行分析,生成 ...

  9. [转]C语言的那些秘密之---函数返回局部变量

    一般的来说,函数是可以返回局部变量的. 局部变量的作用域只在函数内部,在函数返回后,局部变量的内存已经释放了.因此,如果函数返回的是局部变量的值,不涉及地址,程序不会出错.但是如果返回的是局部变量的地 ...

  10. windows中path环境变量即时生效

    修改PATH后,打来CMD命令行,输入 “set PATH=C” (不会真的改变PATH变量值,但会重新读取一次PATH值),关掉CMD窗口再打开.OK 不放心可以 echo %PATH% 检视一下.