一、问题：元素浮动导致的父元素高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。
例如：
的效果是：
二、为了解决问题，这里先介绍一下浮动元素的特点：
（1）元素浮动以后会完全脱离文档流，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。
2024年11月24日
一、问题：元素浮动导致的父元素高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。
例如：
的效果是：
二、为了解决问题，这里先介绍一下浮动元素的特点：
（1）元素浮动以后会完全脱离文档流，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。
2024年11月24日
<header class="main-header clearfix">
<h1>代码介绍</h1>
<nav>
<a href="./blog.html">BLOG</a>
<a href="#">挑战</a>
<a href="#">弹性盒子</a>
<a href="#">CSS</a>
</nav>2024年11月24日
<img src="./w_1.jpg" alt="表情包" title="写信" />2024年11月24日
浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。我们来看一个例子：
上图中main模块下包含了一个标题和4个块，其中四个高度不同的块被包含在一个div容器中。页面想要的效果是四个块在底部两列布局，并保持整齐。
2024年11月24日
如何脱离标准文档流，css中给了三种方法，使一个元素脱离标准文档流。
1.浮动。 2.绝对定位。 3.固定定位。
一、 什么是浮动呢？定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。
二、浮动的的元素有4点特性：
1.浮动元素会脱离标准文档流，已经不区分快和行了。
2.浮动的元素会互相贴靠。
2024年11月24日
浮动定位将元素排除在普通流之外，即元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
为什么需要清除浮动
2024年11月24日
清除浮动，新手朋友往往不是很明白。如果不清除浮动对float进行闭合，在FF中往往会出错，网上是有很多文章讲过，我们先用一个非常简洁易用实例开始吧！
给需要闭合的DIV（class为clearfix）加上如下的CSS样式即可：
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
2024年11月24日
今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
首先，这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。
下面我就讲3种常用清除浮动的方法，够用了。
1、在浮动元素后面加一个空的div，并为它清除浮动
html代码：
<div class="wrap"> <div class="float">浮动</div> <div class="clear"></div> <div class="nofloat">不想被浮动影响</div></div>2024年11月24日
首先我们通过一张图来解释下元素浮动是什么样的状态。
元素浮动情况
上图的html部分代码为：
html代码
css部分代码为：
css代码
通过上面的图片可以看出，当内部的div设置float后，外部的元素的就会受到以下影响：
2024年11月24日
html5实现全选按钮，及统计所选择商品的总价并输出
现有一个商品选择列表（复选框），HTML代码及效果如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="all" οnclick="checkAll(this)" />全选<br/>
<input type="button" value="总金额:" οnclick="getSum()" /><span id="sumid"></span>
</body>
</html>