让内层浮动的Div将外层Div撑开 -----清浮动
清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版。
<div class="parent" style="width:300px; background-color:Red;">
测试
<div class="child" style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
左边
</div>
如图
方法1: 在浮动元素结尾添加一个空的div:
<div style="clear:both"></div>
利弊:方法简单,常用,有违结构与表现分离原则
方法2:爸爸跟着儿子一起浮动:
给父级div添加浮动
.parent{float:left}
利弊:代码简单,排版找虐
方法3:display:table:
Amaze ui 里am-g的用法
.parent{ display:table}
利弊:代码简单,盒模型变成表格,此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符(弊端?)。
方法4:高端借鉴:
方法1跟3的升级版,不破坏结构
.parent:before,.parent:after {
content:"";
display:table;
}
.parent:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.parent { zoom:1; }
.parent:after {content:"\200B"; display:block; height:0; clear:both; }
.parent { *zoom:1; }
让内层浮动的Div将外层Div撑开 -----清浮动的更多相关文章
- 让内层Div将外层Div撑开
在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...
- 【div+css】两个div,如何让内层的div在外层div中水平垂直居中
好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...
- CSS浮动与清浮动
浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...
- 关于浮动与清浮动 float
浮动常见的几种属性值 float {left; right; none; } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...
- web开发:清浮动
一.display总结 二.overflow 三.浮动布局 四.清浮动 五.清浮动的方式 一.display总结 <!DOCTYPE html> <html> <head ...
- [CSS][转载]内层div的margin-top影响外层div
参考 内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法 我使用的是在外层的div中添加 border: 1px soli ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
- IE浏览器中overflow:hidden无效,内层元素超出外层div的解决方法
原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...
- 关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--
一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC " ...
随机推荐
- Spring Boot2.x 的Druid连接池配置[附带监控]
父依赖[Spring Boot 2.1.x版本] <parent> <groupId>org.springframework.boot</groupId> < ...
- Prince and princess——需要优化的DP
一个时间效率为o(nlogn)的算法求公共子序列的应用 Prince and princess 题目大意(已翻译 ) 在nxn的棋盘上,王子和公主玩游戏.棋盘上的正方形编号为1.2.3 ... n * ...
- html实现邮箱发送邮件_js发送邮件至指定邮箱功能
在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?下面列举能够在通过前端实现邮件发送的几种方式: 方式一: ...
- 我打算用JAVA实现GB/T32960 监控平台的tcp server
之前是用golang写得 ,因为对golang不是很熟练,打算基于netty再写一个,开源出来. 如果近期时间宽裕,就准备着手了. 有兴趣的朋友也可以留言一起做.
- Xor_Sum 题解
题目 You are given a positive integer \(N(1≦N≦10^{18})\). Find the number of the pairs of integers \(u ...
- Django---drf第一天---作业
1 图书的5个接口写完(使用序列化组件) urls.py from django.contrib import admin from django.urls import path, re_path ...
- DVWA学习记录 PartⅡ
Command Injection 1. 题目 Command Injection,即命令注入,是指通过提交恶意构造的参数破坏命令语句结构,从而达到执行恶意命令的目的. 2. Low a. 代码分析 ...
- element-ui(vue版)使用switch时change回调函数中的形参传值问题
需求说明 有多个switch组件 需要知道switch的状态 表格中当前行(scope.row)的数据 问题描述 官方文档中对switch中change的描述: 目前能得到switch的状态值,但是无 ...
- python 面向对象专题(五):私有成员、类方法、静态方法、属性、isinstance/issubclass
https://www.cnblogs.com/liubing8/p/11325421.html 目录 Python面向对象05 /私有成员.类方法.静态方法.属性.isinstance/issubc ...
- Zabbix 4.0 API 实践,主机/主机群组 批量添加模板和删除模板
场景 我们日常在管理Zabbix 的时候,经常会需要批量添加模板和批量删除模板,Zabbix页面是提供的批量链接的功能,但是它链接的也只是当前页的主机,我们想扩展这个功能,在链接的时候,可以批量链接整 ...