1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>BFC</title>6 <style type="text/css">7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}8 .div2 {background-color: #EAFFD0; width: 200px; height: 100px;}9 .div3 {background-color: #95E1D3; width: 200px; height: 100px;} 10 </style> 11 </head> 1213 <body> 14 <div class...
经验分享：CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。 写在前面的话： 由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 小菜水平有限，本...
float:设置浮动 浮动会使元素脱离普通文档流，使元素向左或向右移动，其周围的元素也会重新排布，在布局中非常有用。 html：<p>以下是图片的浮动设置：p> <img src="image/follow-1.png"> <p>图片后文字：注意<p>是块级元素，元素前后有换行符。p> 不设置浮动时浏览器显示如下： 设置左浮动float:left;后浏览器显示如下： 设置右浮动float:right;后浏览器显示如下：clear:清除浮动 当有的元素不需要浮动时，但该...
# 浮动### 文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。### 浮动的特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来3、相邻浮动的块元素可以并在一行，超出父级宽度就换行4、浮动让行内元素或...
ul元素右浮动，li元素右浮动会反向排列。li元素会按从上到下依次浮动。如果需要li元素的内容从左向右阅读，那么li元素的浮动只能是float:left；<ul id="nav"><li>a</li><li>b</li><li>c</li></ul>#nav{float: left;list-style: none;padding: 0;}#nav li{float: left;} 效果： 原文：https://www.cnblogs.com/Syinho/p/12267973.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .box1{ /*height: 200px; 嵌套盒子的父亲不方便给高度 */ width: 600px; background-color: pink; overflow: hidden; } .clearfix:after{ content: ""; display: block; /*转化为块级元素*/ height: 0px; visibility: hidden; /* 隐藏盒子*/ } .box2{ width: 600...
浮动造成的影响: 子元素浮动,父元素无法被撑出高了.如果要给父元素做通栏background?如果两个box的子元素都浮动,且希望两个box分行显示?box1 box2 box3: float:left, 则box自己的高度就没办法被撑开了<div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div> </div>现实案例: 需要给父盒子做通栏背景图现子元素浮动,父元素没高度了,没法加了.<div class="content"><div class="ad "></div><di...
CSS浮动之高度塌陷 浮动二字，顾名思义，就是让一个元素飘着、浮着，使之脱离文档流；它的作用就是让竖着排的元素横向排列。 实例：用两个div标签 浮动之前 浮动之后 浮动的属性值：左浮动：float:left; 右浮动：float:right; 默认值：float:none; 接下来我们来谈谈元素浮动之后出现的高度塌陷的问题。那...
最近在做一个div css切割，昨晚发现了长期以来一直无记录下来的问题！关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记先：一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的 话，两个浏览器下会有区别，具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有设置过float就要将float clear掉，不然下面的div会叠在已float的div上。我通常把清除浮动...
<style type="text/css">.clear{background:red;width:200px;}.clear:after{content:"\200B";display:block;clear:both;height:0;}.clear{*zoom:1;}.left{float:left;background:yellow;}.right{float:right;background:blue;}</style></head><body><div class="clear"><div class="left"><p>fsdfdfdsf</p></div><div class="right"><p>fsdfdfdsf</p><p>fsdfdfdsf</p></div></div>原文：http://www.cnblogs.com/timily/p/3766515.h...
人还是要学会思考。我初学css时候，老觉得浮动与绝对定位的功能很类似，原因很简单，因为他俩都能使正常html元素脱离元素流。相对于绝对定位强悍的功能，浮动其实并没有完全脱离元素流，这个后面会说。 那么什么是脱离元素流呢？要搞清楚这个问题，首先得了解什么是元素流。我的理解，元素流是html标签本应该出现在页面的位置，比如下面这段代码。1<div>2<p class="p1">p1</p>3<p class="p2">p1</p>4<p class="p3">p3</p>5</div...
CSS浮动float参考教程（经验分享：CSS浮动(float,clear)通俗讲解）首先了解一下标准文档流的排版：从上到下，从左到右，遇块换行浮动可以理解为让某个div元素脱离文档流，漂浮在文档流之上block元素无视float元素啥意思呢，就是A和B两个block(块级)元素在排队买东西，A在前面，那么B只能遵守规则（标准文档流的遇块换行）突然A膨胀了，飘了，然后B就无视A,前进一步跑到A下面。下图就是这种情况。? but，如果此时A没有浮动，而B浮动...
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 写在前面的话： 由于CSS内容比较多，没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 本文以div元素布局为例。 教程开始： 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： ...
以前网页中的局都是使用浮动来实现的。而浮动在css中是一个挺难理解的概念，这次再巩固一下，float的具体使用事项。1.行内元素和块元素的区别？ 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>行内元素和块元素</title> 6</head> 7<body> 8<span>我是行内元素</span> 9<span>我也是行内元素，我不会独占一行，我所在的这一行是允许其他元素存在的</span>10</body>11</html> 行内元素（img,span）和其他非块元...
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浮动 和 显示方式</title> <style> h1{ text-align: center; } p{ background: pink; } .a{ border: 1px solid red; height: 230px; } .a>img{ height: 200px; width: 200px; } span{ position: relative; top: 20px; left: -100px; /*cursor: pointer;/*小手显示*/ cursor: wait; } </style> </head> <bod...