1、float属性

CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列。

浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影响。比如如果一个图像向右浮动,下面的文本流将环绕在它左边。

<div>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<div class="div2">
<img src="https://www.runoob.com/images/klematis_small.jpg" alt="">
<p>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
</p>
</div>
</div>
.div2 {
background: #c6e5b4;
}
img {
float: right;
}

2、浮动的负作用

2.1、父元素内容区不能被撑开

如果一个父元素里面的子元素都是浮动的话,父元素的内容区将不能被子元素撑开

<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.div1 {
background: #000080;
border: 1px solid red;
}
.left {
float: left;
width: 20%;
}
.right {
float: right;
width: 30%;
}

如图,div1 的内容区将为0

2.2、脱离文档流

使用浮动的元素将会脱离文档流,后面的元素将会跑到浮动元素的下面,不过文本内容不会被遮挡

3、清除浮动

3.1、在浮动元素后面定义一个空元素

给浮动元素后面添加一个空元素,该元素样式为 clear: both ,即可清除浮动

<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div style="clear:both"></div>
</div>

3.2、给浮动元素的父元素添加伪元素

给浮动元素的父元素添加伪元素,给该伪元素添加清除浮动的样式即可清除浮动。

<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.div1:after {
content: "";
clear: both;
display: block;
}

父元素的伪元素必须设置 display 为 block 才行。

注意:伪元素必须设置在浮动元素的父元素上才行,设置在浮动元素上没有效果。比如下面:

<div class="floatDom"></div>
<div class="content">这里是内容</div>
.floatDom {
width:100px;
height:100px;
background:#d9bcbc;
float: left;
}
.floatDom::after {
clear: both;
display: block;
content: "";
}
.content {
height:150px;
background:#8585c0;
}

设置在浮动元素上没有效果,并没有清除浮动,下面的元素仍然会跑上去。

3.3、父元素定义overflow:hidden

<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.div1 {
overflow: hidden;
}

浮动元素的父元素只要定义overflow: hidden 即可清除浮动

为什么父元素设置 overflow 属性即可清除浮动?

原因:根据 BFC 布局规则,计算 BFC 高度时,浮动元素也参与计算。BFC 详情参考:https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

CSS中浮动属性float及清除浮动的更多相关文章

  1. CSS中为什么overflow:hidden能清除浮动(float)的影响?原理是什么?

    http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...

  2. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  3. CSS浮动属性Float介绍

    #cnblogs_post_body h6 {font-size: 16px;font-weight: bold;} 什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中 ...

  4. CSS浮动属性Float到底什么怎么回事,下面详细解释一下

    float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...

  5. CSS浮动属性Float详解

    什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在 ...

  6. CSS基础必备盒模型及清除浮动

    盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...

  7. css考核点整理(一)-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  8. CSS中clear属性的both、left和right浅析

    前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...

  9. CSS中 Zoom属性

    CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...

随机推荐

  1. spring集成mongodb通过aop记录业务日志

    1. 编辑 pom.xml 添加 maven 依赖 <!-- mongodb --> <dependency> <groupId>org.mongodb</g ...

  2. day63—JavaScript浏览器对象cookie

    转行学开发,代码100天——2018-05-18 今天的主要学内容时JavaScript中浏览器对象——cookie. cookie用于存储web页面的用户信息,其存储容量很小,一般几k左右.如常见的 ...

  3. 类HashMap

    /* * Map集合的特点 * 将键映射值的对象,一个映射不能包含重复的值:每个键最多只能映射到一个值 * * Map集合和Collection集合的区别? * Map集合存储元素是成对出现的,Map ...

  4. Caffe参数交换源码分析

    对境准备:对于多个GPU而言,一台机器2个GPU,参数交换的流程图: 参数交换从main()进入train()函数,在train函数中找到对应源码为: . . . . . ) { caffe::P2P ...

  5. 应用安全-安全设备-Waf系列-软Waf-云锁

    安装 安装 - Linux 前提:检查selinux状态 - 关闭selinux getenforce #显示为disabled则为关闭 .下载 x86:wget http://download.yu ...

  6. 计算距离的SQL语句

    一,BEGINset @num=6378.138*2*ASIN(SQRT(POW(SIN((lat1*PI()/180-lat2*PI()/180)/2),2)+COS(lat1*PI()/180)* ...

  7. C语言I作业12——学习总结

    1.我学到的内容 二.我的收获 作业 链接 第一次作业 https://www.cnblogs.com/liuxiangjiang/p/11579877.html 第二次作业 https://www. ...

  8. Apache服务(基于IP地址,主机名,端口号)

    安装Apache服务程序 需要注意apache服务程序的软件包名称叫做httpd,因此直接执行yum install apache则是错误的. [root@liuxuanke-hbza ~]# yum ...

  9. [19/05/20-星期一] CSS_css的盒子模型

    一.盒子模型 <!DOCTYPE html> <html> <!-- div 标签 块级标签 主要用来网页布局, 会将其中的子元素内容作为一个独立的整体存在 默认宽度是页 ...

  10. HTML: 引号不能忽视

    在js中常常生成拼接html,然后放到dom中,但是有些拼接的html标签需要加一些指或者属性,这个时候不能忽略引号 如果data.link_tel有空格,不加单引号导致value的值不完全 str ...