一、float的基本规律

　　规律1：

　　标准流模型中的块级盒子，默认宽度100%；
　　而浮动的块级盒子，宽度不会自动伸展，而是由内容（文字、padding）撑开；
　　浮动后的行级元素，可以设置宽度高度等属性。
　　规律2：
　　当一个盒子浮动后，标准的其他未浮动盒子将视浮动盒子不存在而占据浮动盒子原来的位置（浮动盒子会盖在未浮动盒子上面）。但是，未浮动盒子中的文字内容，将会收到浮　动盒子宽度的影响（浮动盒子不能盖住未浮动盒子的文字内容）
　　>>>浮动能够打破文档流，但是不能打破文字流。
　　规律3：
　　可以设置clear属性是标准流中的其他盒子不受之前盒子的浮动影响。
　　规律4
　　如果父盒子没有指定高度，而父盒子中的所有盒子全部浮动，将导致父盒子的高度塌陷，也就是高度无法被子盒子撑开而变为0.
二、解决子盒子浮动，父盒子高度塌陷的问题
　　①、给父盒子添加overflow：hidden属性.！！！最常用！！！
　　②、让父盒子也浮动！！
　　③、在父容器的最后添加一个高度为0的空div，并添加clear:both；属性清除掉浮动的影响
　　④、使用伪对象选择器::after生成一个空的元素。
　　　　#i::after{
　　　　display: block;
　　　　content: "   ";
　　　　height: 0px;
　　　　clear: both;
　　　　}
三、练习实例　

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>贵美商城</title>
<style type="text/css">

*{
padding: 0px;
margin: 0px;
}

span{
text-decoration: underline;
}

#div{
background-image: url(image/TIM图片20180310153452.gif);
width: 200px;
height: 330px;
background-repeat: no-repeat;
}

#div .ul{
/*解决ul中所有li浮动以后，ul高度变为0的问题*/
overflow: hidden;
}

#div .title{
color: #FF7300;
text-indent: 66px;
}
#div .ul li{
list-style: none;

width: 65px;
height: 35px;
font-size: 14px;
line-height: 50px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div>
<span>你好，欢迎访问贵美商城！</span>
</div><br />

<div id="div">
<div style="height: 36px;"></div>
<h4 class="title">家用电器</h4>

<ul class="ul">
<li>大家电</li>
<li>电冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>

<div style="height: 20px;"></div>
<h4 class="title">家用电器</h4>

<ul class="ul">
<li>大家电</li>
<li>电冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>
</div>
</body>
</html>

盒子浮动float的更多相关文章

  1. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  2. 经验分享：CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  3. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  4. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  5. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  6. （转）经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. 那些年我们一起清除过的浮动float与clearfix

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  8. (转)经验分享：CSS浮动(float,clear)通俗讲解

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

  9. 解决盒子浮动时margin会显示两倍的美观问题

    当给几个大小一样有boder的盒子浮动时,会出现margin自动加起来的结果. 此时可以给每个盒子一个margin-left:-border的长来实现很好的效果,这样右边的盒子会把左边盒子的右边bor ...

随机推荐

  1. MYSQL数据库学习八 触发器的操作

    8.1 触发器 在表发生更改时,自动进行一些处理.例如,学生表中每增加一条关于学生记录时,学生的总数就必须同时改变,同时需要检查电话号码格式是否正确,地址缩写是否正确. 以下语句会激活触发器: DEL ...

  2. poj-2909-哥德巴赫猜想

    Description For any even number n greater than or equal to 4, there exists at least one pair of prim ...

  3. 理解python的元类

    看了一篇文档,借鉴一下!写下自己对python元类的理解,欢迎各位大神给出意见. 我的理解就是 type用来创建元类,元类用来创建类,类用来创建实例 这样一想,是不是可以认为元类创建类的过程等同于类创 ...

  4. linux --> Makefile编写

    Makefile编写 单目录 测试程序在同一个文件中,共有func.h.func.c.main.c三个文件,Makefile写法如下所示: CC = gcc CFLAGS = -g -Wall mai ...

  5. 每天学习点jquery

    一.jquery选择器 1.根据给定的ID匹配一个元素(如果选择器中包含特殊字符,可以用两个斜杠转义)id选择器 举例:html代码 <div id="notMe">& ...

  6. Spring Boot + Freemarker多语言国际化的实现

    最近在写一些Web的东西,技术上采用了Spring Boot + Bootstrap + jQuery + Freemarker.过程中查了大量的资料,也感受到了前端技术的分裂,每种东西都有N种实现, ...

  7. 自动化制作.framework

    1.生成.framework前的配置工作详见:http://www.cnblogs.com/huangzs/p/8029258.html 2. 将以下脚本粘贴进去,修改FMK_NAME. p.p1 { ...

  8. C语言博客作业--一二维数组

    一.PTA实验作业 题目1(7-6) (1).本题PTA提交列表 (2)设计思路 //天数n:数组下标i:小时数h,分钟数m:对应书号的标签数组flag[1001] //总阅读时间sum初始化为0,借 ...

  9. C语言博客作业指针

    一.PTA实验作业 题目1:统计大于等于平均分人数 本题PTA提交列表 设计思路 定义形参s存放s的首地址,n存放人数m的值,aver存放平均分aver的地址 定义i控制循环,count用来统计高于等 ...

  10. Java暑期作业

    一.假期观影笔记--<熔炉> 影片<熔炉>是根据发生在韩国光州聋哑学校里的真实事件而改编.影片讲述的是在一所聋哑儿童学校里,校长.教务以及老师披着慈善的华丽外衣对学校中的多名未 ...