一、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. NodeJS定时任务

    在实际开发项目中,会遇到很多定时任务的工作.比如:定时导出某些数据.定时发送消息或邮件给用户.定时备份什么类型的文件等等 一般可以写个定时器,来完成相应的需求,在node.js中自已实现也非常容易,接 ...

  2. k8s实战为aspnetcore.webapi微服务注入配置信息 - kubernetes

    1.浅析k8s配置信息 Secret 以密文的形式存储数据,可以用来保存一些敏感信息,例如:OAuth tokens.私钥.密码.数据库连接.事件总线连接等. ConfigMap 以明文的形式存储数据 ...

  3. Konckout第一个实例：简单数据模型绑定

    Konck是什么: http://www.aizhengli.com/knockoutjs/50/knockout.html 使用:直接引入knockout.js文件 第一个实例:实现输入框输入值改变 ...

  4. 安装texlive2017(latex的编译软件)

    准备工作是先卸载老版本的texlive,这个只要找到原来安装时的安装目录,然后直接把整个文件夹删掉即可.然后找到最近的Ctan的镜像,下载到对应版本的texlive,例如Mac系统,最好用的就是tex ...

  5. jmeter 前置处理器提取用户cookie信息 比如jsessionid

    一般登录过程分成两步,一步是打开登录页面, 一步是输入用户名和密码登录 现在B/S架构的系统好多时候都只在客户端的cookie信息保留一个jsessionId,然后每次请求的时候在请求的头信息的coo ...

  6. MIPCMS V3.1.0 远程写入配置文件Getshell过程分析(附批量getshell脚本)

      作者:i春秋作家--F0rmat 0×01 前言 今天翻了下CNVD,看到了一个MIPCMS的远程代码执行漏洞,然后就去官网下载了这个版本的源码研究了下.看下整体的结构,用的是thinkPHP的架 ...

  7. 第2次作业：Wechat创作史

    Wechat创作史   比尔盖茨曾经说过一句话:21世纪要么电子商务,要么无商可务. 2.1 介绍产品相关信息 -the information about Wechat 你选择的产品是? 选择微信作 ...

  8. 第一周C语言作业

    一.PTA实验作业 题目1.温度转换 1.实验代码 int main() { int fahr = 150,celsius; celsius = 5 * (fahr - 32) / 9; printf ...

  9. Mybash的实现

    Mybash的实现 要求: 使用fork,exec,wait实现mybash 写出伪代码,产品代码和测试代码 发表知识理解,实现过程和问题解决的博客(包含代码托管链接) 背景知识 1. fork 使用 ...

  10. 用greenlet实现Python中的并发

    from greenlet import greenlet def test1(): print 12 gr2.switch() print 34 def test2(): print 56 gr1. ...