上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。

为什么要清楚浮动？

地址：http://blog.csdn.net/baidu_37107022/article/details/71554283

1.清除浮动方法概览

2.clear方法

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 100px;

                height: 200px;

                background: red;

            }

            /*1.left   元素的左边不能有浮动的元素*/

            /*.div1{

                float: left;

            }

            .div2{

                clear: left;

            }*/

            /*2.right       元素的右边不能有浮动的元素*/

            /*.div1{

                float: right;

            }

            .div2{

                clear: right;

            }*/

            /*3.both        元素的两都不能有浮动的元素*/

            .div1{

                float: left;

            }

            .div2{

                float: right;

            }

            .div3{

                clear: both;

            }

        </style>

    </head>

    <body>

        <!--

            clear           元素的某个方向上不能有浮动的元素

                left        元素的左边不能有浮动的元素

                right       元素的右边不能有浮动的元素

                both        元素的两都不能有浮动的元素

        -->

        <div class="div1">kaivon1</div>

        <div class="div2">kaivon2</div>

        <div class="div3">kaivon3</div>

    </body>

</html>

效果图

清除浮动前：div3钻到了div1下面

清除浮动后：

3.方法2–6的

代码演示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .parent{

                border: 1px solid #f00;

                /*2、给父级添加高度：没有从根本上解决浮动的问题*/

                /*height: 100px;*/

                /*3、inline-block*/

                /*display: inline-block;

                margin: 0 auto;*/

                /*4、overflow:hidden;*/

                /*overflow: hidden;*/

            }

            .box{

                width: 100px;

                height: 100px;

                background: green;

                float: left;

            }

        </style>

    </head>

    <body>

        <!--

            清除浮动的方法

                1、clear

                2、给父级添加高度

                    有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）

                3、inline-block

                    具有与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了

                4、overflow:hidden;

                    如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令

                5、空标签

                    空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准

                    ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差

                6、br清除浮动

                    与上面的问题是一样

                7、after伪类清除浮动（现在最主流的方法）

        -->

        <div class="parent">

            <div class="box"></div>

            <!--5、空标签-->

            <!--<div style="clear: both;"></div>-->

            <!--6、br清除浮动-->

            <br clear="all" />

        </div>

    </body>

</html>

效果图

清除浮动前：

清除浮动后：

4.after伪类清除浮动（现在最主流的方法）

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .parent{

                border: 1px solid #f00;

            }

            .box{

                width: 100px;

                height: 100px;

                background: green;

                float: left;

                color: #fff;

            }

            /*

             * 7、after伪类清除浮动（现在最主流的方法）

             *

             * .box:after{

                content: '这是伪类生成的内容';

            }*/

            .clearfix{

                *zoom:1;

            }

            .clearfix:after{

                content: '';

                display: block;

                clear: both;

            }

        </style>

    </head>

    <body>

        <!--

            清除浮动的方法

                1、clear

                2、给父级添加高度

                    有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）

                3、inline-block

                    具胡与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了

                4、overflow:hidden;

                    如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令

                5、空标签

                    空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准

                    ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差

                6、br清除浮动

                    与上面的问题是一样

                7、after伪类清除浮动（现在最主流的方法）

                    after       代表选择到的元素的内容的最后面

                                after伪类的内容默认是一个行内元素

                    content     设置的内容

        -->

        <div class="parent clearfix">

            <div class="box"></div>

        </div>

    </body>

</html>

效果图同上（第3点）

一天搞定CSS： 清除浮动（float）--13的更多相关文章

  1. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

  2. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  3. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  4. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  5. 一天搞定CSS： 浮动（float）及文档流--10

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

  6. 一天搞定CSS： 浮动（float）的副作用--12

    我们通常使用浮动来实现某些元素的布局,但是往往这些元素浮动会影响其他元素的布局,因此会产生副作用. 如果你还不清楚什么是浮动,那就点开这个链接: http://blog.csdn.net/baidu_ ...

  7. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  8. css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  9. css清除浮动float的三种方法总结

    原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...

  10. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

随机推荐

  1. mysql数据库实操笔记20170418

    一.建立商品分类表和价格表: 1.分类表`sankeq``sankeq`CREATE TABLE cs_mysql11(id INT(11) NOT NULL AUTO_INCREMENT,categ ...

  2. 开发Angular库的简单指导（译）

    1. 最近工作上用到Angular,需要查阅一些英文资料,虽然英文非常烂,但是种种原因又不得不硬着头皮上,只是每次看英文都很费力,因此决定将一些比较重要的特别是需要反复阅读的资料翻译一下,以节约再次阅 ...

  3. spring学习总结一----控制反转与依赖注入

    spring作为java EE中使用最为广泛的框架,它的设计体现了很多设计模式中经典的原则和思想,所以,该框架的各种实现方法非常值得我们去研究,下面先对spring中最为重要的思想之一----控制反转 ...

  4. 读书笔记 effective c++ Item 54 让你自己熟悉包括TR1在内的标准库

    1. C++0x的历史渊源 C++标准——也就是定义语言的文档和程序库——在1998被批准.在2003年,一个小的“修复bug”版本被发布.然而标准委员会仍然在继续他们的工作,一个“2.0版本”的C+ ...

  5. OpenCV 玩九宫格数独（二）：knn 数字识别

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:刘潇龙 前言 首先需要说明,这里所说的数字识别不是手写数字识别! 但凡对机器学习有所了解的人,相信看到数 ...

  6. cmapx 保存绘制好的图层

    研究了两天,如何保存一绘制好的图层,大致意思都说要使用mapInfo表,然后确定了可定和.TAB表有关.然而网上说的全是垃圾,也不能说全是垃圾,好歹我从中得到了一点点有用的信息,使用mapManage ...

  7. 关于div+css布局值得注意的地方

    注意项 我们知道,如果想要两个 div(即块级元素)挨着一起排列,可以将其设置为inline-block(行内-块元素). 不过要注意两个div内的内容的对齐方式将是垂直中间对齐,所以这时候就需要使用 ...

  8. ConcurrentHashMap、HashTable、HashMap的区别

    HashTable与ConcurrentHashMap: 相同点:都是线程安全的,可以在多线程的环境下运行.key和value都不能为null 区别:性能上的差异.HashTable每次操作对象都会锁 ...

  9. HTML5工具做屏幕自适应的两种方法

    近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设 ...

  10. 转：request.getSession(true)和request.getSession(false)的区别

    1.转自:http://wenda.so.com/q/1366414933061950?src=150 概括: request.getSession(true):若存在会话则返回该会话,否则新建一个会 ...