div+css浮动的解决方法-css教程-PHP中文网

首页

web前端

css教程

div+css浮动的解决方法

高洛峰

Mar 31, 2017 am 11:15 AM

css 浮动

如何清楚浮动（一）

　　已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个大的div容器

，这个大的div包含了一个子div容器

，子div容器设置一个宽度、高度、背景色，不设置内、外边距以及浮动，此时子div容器默认居左，这时子div居左是浮动(float)继承浏览器的属性，不具有布局的作用。然后我们设置这个子div容器的浮动，让它居左float:left；我发现设置了浮动居左float:left，子div容器产生了浮动，子div容器离大div容器顶部有一定距离。

<body>
        <div class="divcss5">
            <div class="clear"></div>
　　　　　　　　<!--<div class="clear eft"></div>
            　　　　　　　　<div class="clear ight"></div>-->
        </div> 
    </body>

登录后复制

浮动有margin属性

　　然后我margin-top:10px, 子div容器在原有的基础上向下移动了10px的距离，也就是说，浮动不会影响margin-top属性应有的偏移量，同理也不会影响margin-left、margin-right、margin-bottom属性应有的偏移量。

浮动没有top，left，right，bottom属性

　　然后，现在我删掉margin-top:10px;，给子div容器设置top:10px，发现纵坐标并没有发生偏移，也就是是说浮动并没有top属性。同理也就没有left、right、bottom属性。

　　那么，在什么情况下设置top、left、right、bottom的属性才能对浮动起作用呢？

浮动有top，left，right，bottom属性(条件设置相对位置position)

　　于是，我给子div容器加了相对位置position:relative，接着设置top:10px，突然发现子div容器向下偏移了10px。

　　继续在子div浮动的状态，给它设置position:relative;，接着给它设置margin-left:10px;，看到子div容器的位置水平向右发生了10px的偏移量，同理margin-top、margin-right、margin-bottom都会改变。

　　也就是说，当給子div容器设置浮动float:left，接着设置margin-left会起作用，设置top是没有作用。只有给子div容器设置相对位置position的时候，top才能在浮动的状态下起作用，那么是不是说left，top是在相对位置的时候，才能起作用呢？那么现在我们就做一个实验，我在子div容器里把float:left;position:relative;都删掉，不会有浮动，也不会有相对位置，然后写上top:10px;left:10px;相应的css代码如下.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};，结果是子div容器根本没有在横、纵轴移动过位置，所以事实证明left、top是在设置了相对位置position的时候才起作用。margin就是不管你设置position与不设置position都会起作用。

　　继续上面的float浮动，如果现在给float设置inherit;继承浏览器的浮动属性，此时我们看子div是不浮动的，默认居左。同样的給子div设置浮动样式 none initial也不会有浮动作用。只有給子div容器设置了left和right的浮动，子div容器才会出现浮动状态。

如何清楚浮动（二）

　　下面，我们用一种其他的方法来清除浮动，HTML代码还是以上的代码，大容器的div的css代码：.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;}，子div容器的css代码：.clear{width: 200px;background: #f2e;color:#030617;height: 20px;float:left;}，此时看到的是浮动的效果，子div容器浮在大容器上面，同样的原理，我还是用清除浮动clear:both；我们可以用css伪元素:after，下面就是一个很简单的css代码，给父容器写css伪类，代码：.divcss5:after{content: "1";clear: both;display: block;}，此时，我们看到的是，清除了大容器的浮动，并且在浏览器上能看到子div容器被包含在了大div容器内部。在浏览器上查看元素，可以看到after包含在了父容器内，所以，after相当于在给父容器内部加一个清楚浮动的div，只是少了一个div层，这个层被.divcss5:after实现了。

以上是div+css浮动的解决方法的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7493

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。