子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法。
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。
如何解决父div对象自适应高度,方法有三种。
方法一:对父级设置固定高度
此方法可用于能确定父级div内子级对象高度。
如果我们知道内部div高度100px,那对父级设置css height为100px看看效果。
此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度。此方法针对能确定父div内的内容高度情况下使用。
方法二:使用css clear清除浮动
对父级div标签闭合</div>前加一个clear清除浮动对象。
此方法需要注意是clear:both加的位置,不是对父级直接加clear样式,而是在父级</div>前加带clear对象盒子。
方法三:对父级样式加overflow样式
此方法非常简单,也可以作为推荐解决父级不能被撑开自适应高度的方法,可以不增加div盒子对象,只需要对父级加一个overflow:hidden样式即可。
推荐。此方法为非常简单解决子用float,父div不能自适应高度,不能随父内容多少而自适应高度没有高度。
子级用css float浮动 而父级不能自适应高度解决方法的更多相关文章
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- 解决子元素用css float浮动后父级元素高度自适应高度
1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...
- div高度不能自适应(子级使用float浮动,父级div高度不能自适应)
1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...
- CSS清除浮动使父级元素展开的三个方法
点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...
- CSS设置浮动导致背景颜色设置无效的解决方法
float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...
- CSS布局自适应高度解决方法
这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏 ...
- 子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度
方法一:对父级设置固定高度 假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果. 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度.此方法 ...
随机推荐
- [Python]json 错误xx is not JSON serializable
TypeError: Decimal('1457501') is not JSON serializable 在使用json的时候经常会遇到xxx is not JSON serializable, ...
- 【随记】WPF中xaml输入中文乱码问题解决
在Visual Studio中开发WPF应用程序时,在XMAL文档编写界面输入中文时变为乱码.可能的原因之一是VS中安装了VAssistX插件,导致编码冲突,使中文输入乱码.解决方法是在VAssist ...
- ListView-电影列表
import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, ListView } from ...
- Hacking Lambda Expressions in Java
Hacking Lambda Expressions in Javahttps://dzone.com/articles/hacking-lambda-expressions-in-java At t ...
- c++ 两个set合并
set<int> a,b; //合并到a a.insert(b.begin(),b.end());
- [八分之三的男人] POJ - 1741 点分治 && 点分治笔记
题意:给出一棵带边权树,询问有多少点对的距离小于等于\(k\) 本题解参考lyd的算法竞赛进阶指南,讲解的十分清晰,比网上那些讲的乱七八糟的好多了 不过写起来还是困难重重(史诗巨作 打完多校更详细做法 ...
- vue-lazyload图片懒加载的简单使用
一.vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-l ...
- php引擎文件php.ini优化参数
无论是Apache环境还是nginx环境,php.ini都适合,php-fpm.conf适合nginx+fcgi的配置. 生产环境php.ini(php.ini-production) php.ini ...
- 剑指offer——面试题20:表示数值的字符串
#include"iostream" using namespace std; bool IsInt(const char **str); bool IsUnsignInt(con ...
- mouseover和mouseenter闪烁的问题
span标签绑定mouseover/mouseout事件,显示/隐藏一个信息框div 该div下没有任何子元素 悬停上去一直闪烁,改成mouseenter也没用. 照成的原因是:悬停上去信息框div盖 ...