初衷:图片环绕效果

1.会使父元素高度塌陷

2.包裹性

3.让元素block化

4.去空格化  

5.清除浮动

.clearfix::after{

    content:"";

    display: table;

    clear: both;

}

CSS深入理解float的更多相关文章

  1. CSS属性之float学习心得

    全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:flo ...

  2. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  3. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  4. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  5. CSS深入理解之absolute（HTML/CSS）

    absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...

  6. CSS学习之float解析

    转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...

  7. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  8. CSS深入理解之line-height

    以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...

  9. css清除浮动float

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

随机推荐

  1. HDU Stealing Harry Potter's Precious（状压BFS）

    状压BFS 注意在用二维字符数组时,要把空格.换行处理好. #include<stdio.h> #include<algorithm> #include<string.h ...

  2. POI之Excel文档增删改查

    需要引用apache第三方lib库poi 支持xls.xlsx格式excel读写操作 package com.hua.excel; import java.io.File;import java.io ...

  3. Mybatis-技术专区-Mapper接口以及Example的实例函数及详解

    一.mapper接口中的方法解析 mapper接口中的函数及方法 int countByExample(UserExample example) thorws SQLException     按条件 ...

  4. git-ssh-keygen

    ssh-keygen 先看本地是否已经有了密钥 cd ~/.ssh 该文件夹下会包含两个文件 id_rsa --私钥 id_rsa.pub --公钥 如果没有这两个文件的话就需要重新生成(有的话使用一 ...

  5. 20191114PHP文件操作

    <meta charset="utf-8"><?php// $fn=fopen("c:\\abc.txt","w"); / ...

  6. js操作对象属性用点和用中括号有什么不同

    书读百遍其义自见 学习<JavaScript设计模式>一书时,学习工厂模式这一章节,发现了对象后使用中括号的情况,如下: var Factory=function(type,content ...

  7. 初学Java 使用输入对话框

    import javax.swing.JOptionPane; public class ComputeLoanUsingInputDialog { public static void main(S ...

  8. windows linux子系统(Windows Subsystem for Linux)的存放目录

    win10子系统把windows的底层接口做了个转换到Linux从而能运行linux,但是他在安装的时候并没有提供安装位置的选项.(还有hyper v) 现在,所有从商店安装的发行版都存在于以下目录中 ...

  9. ERROR=(CODE=1153)

    jdbc 连接oracle数据库(10.2.0.4),应用程序报错如下: Connection refused(DESCRIPTION=(ERR=1153)(VSNNUM=169870592)(ERR ...

  10. bzoj4182 Shopping 点分治+单调队列优化多重背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4182 题解 有一个很直观的想法是设 \(dp[x][i]\) 表示在以 \(x\) 为根的子树 ...