CSS中有哪三种清除浮动float的方法-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

CSS中有哪三种清除浮动float的方法

这篇文章将为大家详细讲解有关CSS中有哪三种清除浮动float的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联于2013年成立，是专业互联网技术服务公司，拥有项目成都网站制作、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元芜湖做网站,已为上家服务,为芜湖各地企业和个人服务,联系电话:18982081108

一、浮动的定义

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

ps:文档流：文档流是文档中可显示对象在排列时所占用的位置。

语法

float常跟属性值left、right、none

float:none 不使用浮动

float:left 靠左浮动

float:right 靠右浮动

二、浮动的用途

可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。

三、浮动用法

分析HTML结构：

分析CSS代码样式：

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
    }
    .div1 {
      width: 100px;
      height: 100px;
      background: darkblue;
      float: left;
    }
    .div2 {
      width: 100px;
      height: 100px;
      background: darkgoldenrod;
      float: left;
    }
    .div3 {
      width: 100px;
      height: 100px;
      background: darkgreen;
      float: left;
    }

CSS中有哪三种清除浮动float的方法

清除浮动

方法一：添加新元素，应用clear：both;

HTML：

.box { border: 1px solid #ccc; background: #fc9; color: #fff; margin: 50px auto; padding: 50px; overflow: auto; zoom: 1; /*zoom: 1; 是在处理兼容性问题 */ }

.box { border: 1px solid #ccc; background: #fc9; color: #fff; margin: 50px auto; padding: 50px; } .box:after{ content: ''; display: block; clear: both; }

新闻中心

其他资讯