最近学习一个html,出现一个奇怪的现象，话不多说先贴代码。 `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ margin:0; pa ...
分类：
其他好文 时间：
2020-03-27 00:29:30
阅读次数：
60
1.标准流(文档流/普通流)排版 网页默认的排版方式，及块级元素,行内元素，行内块级元素在网页中的排版方式（块级元素独占一行，可以设置宽高/行内元素，行内块级元素不独占一行/行内元素不可以设置宽高/行内块级元素可以设置宽高） 2.浮动流排版 由图一变成图二有两种方法 1.把两个方块都变成行内块级元素 ...
分类：
Web程序 时间：
2020-03-23 15:15:47
阅读次数：
98
浮动元素的脱标（脱离标准流） <style type="text/css"> .box1{width: 100px;height: 100px;background-color: aqua; float: left; } .box2{width: 150px;height: 150px;backgr ...
分类：
Web程序 时间：
2020-03-23 15:04:39
阅读次数：
70
css布局有三种方式： 1、默认文档流方式 以html元素的结构顺序显示 2、浮动布局方式 通过设置html元素的float属性显示 3、定位布局方式 通过设置html元素的position属性显示 浮动：float 什么是浮动？ 浮动（float）是css实现布局的一种方式，包括div在内的任何元 ...
分类：
其他好文 时间：
2020-03-22 14:09:36
阅读次数：
60
清除浮动 当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，浮动元素的影响浮动的清理（clear） 值： none：默认值。允许两边都可以有浮动对象 left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：左右两侧都不允许 ...
分类：
其他好文 时间：
2020-03-22 14:00:18
阅读次数：
62
在父dom对象上添加class .clearFloat { content: ""; display: block; visibility: hidden; height: 0; clear: both; } ...
分类：
Web程序 时间：
2020-03-21 12:37:43
阅读次数：
71
float的特性： 1. 元素‘浮动’ 2. 脱离文档流 3. 但不脱离文本流 float 对自身影响： 1. 形成“块”（BFC），可设置宽高 2. 位置尽量靠上 3. 位置尽量靠左(右) float 对兄弟影响： 1. 一般上面贴非float元素 2. 旁边贴float元素 3. 不影响其它块级 ...
分类：
其他好文 时间：
2020-03-21 09:29:36
阅读次数：
85
三栏布局，中间自适应这个经典的问题，之前也看了很多。今天准备在自己的博客里面总结一下，加深自己的理解。 方式一：左边左浮动，右边右浮动，中间自适应 <style> .left{ float: left; height: 200px; width: 200px; background-color: a ...
分类：
其他好文 时间：
2020-03-21 00:06:46
阅读次数：
54
title: css 清除浮动 date: 2020 03 10 17:03:10 tags: css 清除浮动 浮动float最开始出现的意义是为了让文字环绕图片而已，后来用于让块级元素并排展示 float 会导致该浮动元素的块级元素的父元素高度塌陷，所以需要清除浮动 清除浮动是指清除由于子元素浮 ...
分类：
Web程序 时间：
2020-03-18 13:18:35
阅读次数：
73
浮动：浮动元素不占用源文档流的位置，所以会对后面或者父级元素的排版产生影响，为解决这个问题，需要在元素中清除浮动，解决浮动元素造成的影响 父级元素因为子元素浮动而高度变为0 1.给父元素定义高度 2.利用after和zoom 添加一个空div 利用clear:both让父div自动获取高度 .cle ...
分类：
其他好文 时间：
2020-03-17 23:47:45
阅读次数：
60
