浮动造成的影响: 子元素浮动,父元素无法被撑出高了.

  • 如果要给父元素做通栏background?
  • 如果两个box的子元素都浮动,且希望两个box分行显示?

box1 box2 box3: float:left, 则box自己的高度就没办法被撑开了

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

现实案例: 需要给父盒子做通栏背景图

现子元素浮动,父元素没高度了,没法加了.

<div class="content">
<div class="ad "></div>
<div class="news"></div>
</div>

现实案例: 盒子需要分两排显示

子元素浮动,2个父元素都没高度,所以连个父元素的子元素都并排显示了, 没办法分行显示

    <style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
float: left;
width: 100px;
text-align: center;
background: yellowgreen;
}
</style> <div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div> <div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>

按理说2个box,分行显示没问题,但此时这两个box的子box发生了浮动, 发生浮动的子元素无法撑开父box, 导致两个父box的内容并排显示了.

给box2设置10px的border如图

现实案例: 底部元素跑到上面去了

[css]浮动造成的影响的更多相关文章

  1. 《----css样式---------浮动带来的影响与解决方法---------------》

    浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...

  2. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  3. CSS浮动并清除浮动(造成的影响)

    一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...

  4. CSS中为什么overflow:hidden能清除浮动(float)的影响?原理是什么?

    http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...

  5. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  6. 带你熟悉CSS浮动

    一.概念理解 浮动:顾名思义先浮后动,浮动的对象会先漂浮起来,离开自己原来的位置(也就是所谓的脱离文档流),后动的意思是,它的后面的元素会向它原来的位置动起来. 二.注意事项 1.当元素有浮动属性时, ...

  7. css 浮动

    1. 浮动 浮动是css的布局功能,在CSS中,包括div在内的任何元素都可以浮动的方式显示.它能够改变页面中对象的前后流动顺序.浮动元素会脱离文档流,不占据空间.浮动元素可以左右移动,直到碰到包含它 ...

  8. CSS浮动特性总结

    1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯 ...

  9. [[转]CSS浮动原理

    CSS Float是网页设计最强大的灵活性功能之一.本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs. 内容 基本的浮动原理 浮动是如何进行的 浮动从何处开始 水 ...

随机推荐

  1. JavaScript正则表达式1

    在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码. 正则表达式可以: •数据有效性验证.可以 ...

  2. Spring MVC异常统一处理

    package com.shzq.common.exception; import java.io.PrintWriter;import java.io.StringWriter;import jav ...

  3. TCP/IP协议族-----24、网络管理(SNMP)

  4. Maven------电脑安装Maven

    转载: http://blog.csdn.net/jiuqiyuliang/article/details/45390313 注意:修改本地仓库路径时,<localRepository>D ...

  5. java基础---->java中Properties的使用

    Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支 持的配置文件,配置文件中很多变量是经常改变的,这样做也 ...

  6. MQTT协议笔记之mqtt.io项目HTTP协议支持

    前言 MQTT协议诞生之初,就未曾考虑通过HTTP传输.这也正常,网络受限.不稳定网络不太适合HTTP(2G/3G网络大家使用WAP不也OK嘛).在网络较为充裕的桌面端而言,虽纯文本对比二进制而言没多 ...

  7. php中关于时间的用法

    一.时间戳相关:        当前时间戳:time();         把时间戳转换为时间显示:date("Y-m-d H:i:s", $a);         把日期时间转换 ...

  8. hdu4976 A simple greedy problem.

    A simple greedy problem. Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java ...

  9. 使用ThreadLocal在线程内部传递数据

    最近在项目中使用到了JDK提供的线程池,遇到了在多线程环境下在线程内部共享数据的问题 使用ThreadLocal 来解决线程内部共享数据的问题 定义BO package com.unicom.uclo ...

  10. [转帖]双剑合璧:CPU+GPU异构计算完全解析

    引用自:http://tech.sina.com.cn/mobile/n/2011-06-20/18371792199.shtml 这篇文章写的深入浅出,把异构计算的思想和行业趋势描述的非常清楚,难得 ...