导读:

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,Float(浮动),往往是用于图像,使得文字围绕图片的效果,而它在布局时一样非常有用。不过有利也有弊,使用浮动的时候也会带来一些负面效果。为了不因浮动元素破坏整个文档的布局,所以需要清除浮动,而今清除浮动的方法众多,在此就常见的方法进行理解和记录。

基本概念

首先我们来看一下下面这种情况:父元素的边框未被撑开,子元素从下方溢出。

清除浮动前

清除浮动后

为什么会产生上面的情况呢,由于浮动的特性,导致本属于普通流中的元素浮动之后脱离了该流,包含框内部由于不存在其他普通流元素了,也就表现出所谓高度塌陷。而高度的塌陷使页面后面的布局不能正常显示,造成我们本不期望的效果,总的来说浮动带来的负作用包括:

  • 边框不能撑开
  • 背景不能显示
  • margin 设置值不能正确显示

清除方法

由于浮动带来的影响,所以清除浮动很有必要,而今清除浮动方法不少,不过个别方法也存在着兼容性的问题,接下来就常用的几种方法做下简单的介绍。

1、使用clear属性

在浮动元素下方添加空div,并给该元素写css样式:

    //代码简洁,浏览器支持好
.clearfix{ clear:both }
//增加了无意义的结构元素

2、使用overflow属性

给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden:

    ////代码简洁
.overflow: hidden; zoom: 1; //zoom: 1; 兼容低版IE
//不能和position配合使用,因为超出的尺寸的会被隐藏

3、为父元素指定高度

给浮动元素的父元素指定高度:

    //简单,简洁
width: * px;
//只适合高度固定的布局

4、伪元素(推荐)

给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden:

    .clear{ zoom: 1; }     // zoom: 1; 兼容低版IE
.clear:after{
content: '';
display: block;
clear: both;
height: 0; // 避免生成内容破坏原有布局的高度
overflow: hidden;
visibility: hidden;}

zoom 属性目前是IE的专有属性,设置该值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变该值时其实也会发生重新渲染,运用这个原理,也就解决了 IE 下子元素浮动时候父元素不随着自动扩大的问题。

写在最后

清除浮动常用的方法大概就是这几个,在不同的场景下选用最合适的方法就是最好的方法。更多内容点击查看 CSS 浮动

如果文中有什么错误,欢迎大家指正,愿与大家在交流之中共同进步,愈激烈,愈深刻。感谢。

CSS 清除浮动的几种方法的更多相关文章

  1. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  2. 活学活用,CSS清除浮动的4种方法

    清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...

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

    四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...

  4. css清除浮动的8种方法以及优缺点

    浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...

  5. CSS 清除浮动的4种方法

    此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...

  6. CSS 清除浮动的四种方法

    在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...

  7. css清除浮动的几种方法

    推荐几种好用的清除浮动方法: 方法1: .clearfix:after { content:"."; display:block; height:; clear:both; vis ...

  8. CSS读书笔记(3)---清除浮动的几种方法

    浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...

  9. [css]浮动-清除浮动的3种方法

    清除浮动的方法: 内墙法 注: 这是个奇淫技巧,没什么原理可言,记住即可 这个技巧又使得父box重新可以被子box撑开高度了. 隔墙法-适用于2个box之间上下排列 由于2个box高度依旧是0, 彼此 ...

随机推荐

  1. saltstack的高级管理

    一.saltstack的状态管理 状态管理官网: https://www.unixhot.com/docs/saltstack/ref/states/all/index.html 1)状态分析 [ro ...

  2. k3 cloud中数值以百分比的形式展示

    显示格式化字符串:P去掉区域设置的勾选

  3. [转载]Linux上使用ssl进行端口转发

    原文地址:Linux上使用ssl进行端口转发 作者:呼延十 背景介绍 作为一个后端程序员,经常要和别人联调接口,每当这时,总是被公司的各种,dev,qa,pre,prod环境搞得头疼,,,我真的只是想 ...

  4. ERROR- 开发常见error

    一,数据插入MySql中出现中文乱码 解决办法有: 1.新建数据库选择 create database 'GG' CHARACTER SET 'utf8 ' COLLATE 'utf8_general ...

  5. <select multiple="multiple"> 数据回显

    var names = yunying_name.split(","); for (var i = 0; i < names.length; i++) { names[i] ...

  6. Centos 安装.NET Core环境

    https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install 一.概述 本篇讨论如何把项目发布到Linux环境,主要包括 ...

  7. Vue 左右翻页,点赞动画

    因做小活动比较多,使用了一些动画,做些笔记,供大家参考 翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...

  8. linux下清空文件内容

    在命令行下#cat /dev/null >listener.log

  9. Redis缓存在django中的配置

    django  settings中的配置 # 缓存 CACHES = { "default": { "BACKEND": "django_redis. ...

  10. shell脚本学习 (10) 从结构化文本提取数据

    1提取/ 后的数据 sed -e 's=/.*==' do.txt 2 sed -e 's=/.*=='\ -e 's=^\([^:]*\):\(.*\) \([^ ]*\)=\1:\3, \2=' ...