清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版。

<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撑开 -----清浮动的更多相关文章

  1. 让内层Div将外层Div撑开

    在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...

  2. 【div+css】两个div,如何让内层的div在外层div中水平垂直居中

    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...

  3. CSS浮动与清浮动

    浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...

  4. 关于浮动与清浮动 float

    浮动常见的几种属性值 float {left;  right;  none;  } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...

  5. web开发:清浮动

    一.display总结 二.overflow 三.浮动布局 四.清浮动 五.清浮动的方式 一.display总结 <!DOCTYPE html> <html> <head ...

  6. [CSS][转载]内层div的margin-top影响外层div

    参考 内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法 我使用的是在外层的div中添加 border: 1px soli ...

  7. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  8. IE浏览器中overflow:hidden无效,内层元素超出外层div的解决方法

    原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...

  9. 关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--

    一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC " ...

随机推荐

  1. Spring Boot2.x 的Druid连接池配置[附带监控]

    父依赖[Spring Boot 2.1.x版本] <parent> <groupId>org.springframework.boot</groupId> < ...

  2. Prince and princess——需要优化的DP

    一个时间效率为o(nlogn)的算法求公共子序列的应用 Prince and princess 题目大意(已翻译 ) 在nxn的棋盘上,王子和公主玩游戏.棋盘上的正方形编号为1.2.3 ... n * ...

  3. html实现邮箱发送邮件_js发送邮件至指定邮箱功能

    在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?下面列举能够在通过前端实现邮件发送的几种方式: 方式一: ...

  4. 我打算用JAVA实现GB/T32960 监控平台的tcp server

    之前是用golang写得 ,因为对golang不是很熟练,打算基于netty再写一个,开源出来. 如果近期时间宽裕,就准备着手了. 有兴趣的朋友也可以留言一起做.

  5. Xor_Sum 题解

    题目 You are given a positive integer \(N(1≦N≦10^{18})\). Find the number of the pairs of integers \(u ...

  6. Django---drf第一天---作业

    1 图书的5个接口写完(使用序列化组件) urls.py from django.contrib import admin from django.urls import path, re_path ...

  7. DVWA学习记录 PartⅡ

    Command Injection 1. 题目 Command Injection,即命令注入,是指通过提交恶意构造的参数破坏命令语句结构,从而达到执行恶意命令的目的. 2. Low a. 代码分析 ...

  8. element-ui(vue版)使用switch时change回调函数中的形参传值问题

    需求说明 有多个switch组件 需要知道switch的状态 表格中当前行(scope.row)的数据 问题描述 官方文档中对switch中change的描述: 目前能得到switch的状态值,但是无 ...

  9. python 面向对象专题(五):私有成员、类方法、静态方法、属性、isinstance/issubclass

    https://www.cnblogs.com/liubing8/p/11325421.html 目录 Python面向对象05 /私有成员.类方法.静态方法.属性.isinstance/issubc ...

  10. Zabbix 4.0 API 实践,主机/主机群组 批量添加模板和删除模板

    场景 我们日常在管理Zabbix 的时候,经常会需要批量添加模板和批量删除模板,Zabbix页面是提供的批量链接的功能,但是它链接的也只是当前页的主机,我们想扩展这个功能,在链接的时候,可以批量链接整 ...