浮动属性浮动允许元素彼此相邻。 创建一个自然的流布局，您可以同时设置自己的大小和父元素容器的大小。 当一个元素浮动时，其余的元素“包围”它。 当元素浮动时，元素的位置取决于放置在它附近的元素。它周围的第一个元素是哪个？这个元素是否会换行取决于它周围的元素的DOM浮动中存在的问题。一个典型的问题是一个父元素包含多个浮动子元素，页面内容设置了宽度。子元素的浮动决定了它们的位置，但浮动元素不会改变父元素的宽度。 这将导致父元素折叠，使父元素的高度为“0”，从而忽略其他属性。这种现象在大多数时候会被忽略，尤其是当混合父元素没有样式并且其子元素看起来都正确的时候。 嵌套元素将不会正确排列，并且可能会出现错误。请参见下面的示例。 在框集的div中应该有一个灰色背景，因为灰色背景在子元素浮动后是不可见的。 仔细检查后，机顶盒的高度变为“0” & ltdiv class="box-set " >& ltdiv class="box " >Box1 & lt/div & gt；& ltdiv class="box " >Box2 & lt/div & gt；& ltdiv class="box " >方框& lt/div & gt；& lt/div & gt；。框集{ background-color:# CCC；}.方框{背景:浅绿色；高度:100px行高:100px浮动:左；边距:10px宽度:100px文本对齐:居中；颜色:# fff边框半径:10px}结果如下:img处理方法:1。清除浮动(clear:both；)在容器的结束标签前添加一个空标签，并将空标签的样式设置为“clear:both；” 这种情况在大多数情况下是有效的，但是如果一个页面需要大量的清理和浮动，就会造成空标签的堆积。 & ltdiv class="box-set " >& ltdiv class="box " >Box1 & lt/div & gt；& ltdiv class="box " >Box2 & lt/div & gt；& ltdiv class="box " >方框& lt/div & gt；& ltdiv class="clear " >& lt/div & gt；& lt/div & gt；。clear { clear:both；}结果如下图IMG2: 2。溢出提示overflow属性指定当内容溢出元素框时会发生什么。 在带有浮动元素的父容器中，将“溢出”的属性值设置为“自动”或“隐藏”，父容器将有一个高度并显示背景颜色。 缺点在给元素添加样式或者添加阴影或者制作下拉菜单时，会出现几个问题，比如给div添加阴影，可以看到阴影被父元素截断，无法延伸出父元素。 结果如下:IMG 4: 3。clearfix技能更好的清除浮动img4的方法:3.clearfix技能。 Clearfix基于在父元素上使用“:before”和“:after”伪类。 使用伪类在浮动元素的父容器的前面和后面创建隐藏元素。 伪类“:before”用于防止子元素顶部的外部边距折叠，并使用“display:table”创建一个匿名的表格单元格元素。 伪类“:after”用于防止子元素底部的外部边距折叠，从而清除元素的浮动。 我们将group的类名添加到必需的元素中，这样就不会使代码栈变得严肃。 & ltdiv id="box-set" class="group " >& ltdiv class="box " >Box1 & lt/div & gt；& ltdiv class="box " >Box2 & lt/div & gt；& ltdiv class="box " >方框& lt/div & gt；& lt/div & gt；。组:之前，。组:在{内容:“”之后；显示:表格；}.group:after { clear:both；} # box-set { background-color:# eee；}效果如下图img5所示:子元素可以延伸出父元素，浮动被清除。