运用float（浮动）怎样布局？浮动布局的示例
在以前的文章【float有哪些？float属性详解】中介绍了float属性有哪些，为何要有浮动等等见识，大家感乐趣的，可以参照 一下。下面我们通过浮动布局的示例，来看看float来怎样布局内容。
1、运用float来实现内容围绕
html代码：
浮动--文字围绕
向左浮动此文本位于浮动盒子（.box_left）之后的正常段降中。该段可以看作是浅绿色的盒子。请注意，此轮廓延长 到浮动div的 背面。这很重要，由于这意味着段降的左侧现实上位于页面的左侧。只是该段降的内容已经向右挪移，以“绕过”浮动的DIV。要是你试图操作与浮点相邻的段降一侧的边距或 添补，则会发生影响。
向右浮动此刻我们增加第二段并用内容充实它。你应当看到，一旦遮盖了div的高度，此段降文本将围绕它，以便文本不再缩进。相似的结果可在html通过设定来实现。
float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和背面的文本之间增加一些添补像素。这在规范中没有位置，只是他们“弱化”CSS和HTML的方式。在其他阅读器中，段降文本将与浮动的DIV对接。要是要在所有阅读器中添补，则需要为浮动元素指定边距。
css代码：
.demo {
width: 520px;
overflow: hidden;
border: 2px solid paleturquoise;
padding: 10px;
margin: 100px auto;
}
.box_left {
float: left;
margin-right: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
.box_right {
float: right;
margin-left: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}结果图：
浮动--文字围绕
向左浮动此文本位于浮动盒子（.box_left）之后的正常段降中。该段可以看作是浅绿色的盒子。请注意，此轮廓延长 到浮动div的 背面。这很重要，由于这意味着段降的左侧现实上位于页面的左侧。只是该段降的内容已经向右挪移，以“绕过”浮动的DIV。要是你试图操作与浮点相邻的段降一侧的边距或 添补，则会发生影响。
向右浮动此刻我们增加第二段并用内容充实它。你应当看到，一旦遮盖了div的高度，此段降文本将围绕它，以便文本不再缩进。相似的结果可在html通过设定来实现。
float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和背面的文本之间增加一些添补像素。这在规范中没有位置，只是他们“弱化”CSS和HTML的方式。在其他阅读器中，段降文本将与浮动的DIV对接。要是要在所有阅读器中添补，则需要为浮动元素指定边距。
结果图：
首先列
float的一个略微不常见属性但有非常强大的用法，可以将内容分组为列。这可以通过将div向左浮动以构成左侧列，然后增加第二个div来完成，同时向左浮动以位于其周边。每个DIV必需拥有宽度，你可以向首先个DIV增加右侧距以分隔列。在很多状况下，这使得TABLE元素的运用变得无须要。
首先列
你可以看到此框中的内容与首先个段降相邻，而且与首先个示例不一样，一旦革除了首先个浮点的高度，它就不会回绕。
运用这种布局，你必需记住在最后一个DIV之后增加一个革除，不然后续内容可以涌现在两列中和四周。
css代码：
.demo {
width: 800px;
overflow: hidden;
border: 2px solid paleturquoise;
padding: 10px;
margin: 100px auto;
}
.box_1 {
float: left;
margin-right: 15px;
width: 200px;
height: 310px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
.box_2 {
float: left;
margin-left: 15px;
width: 200px;
height: 310px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}结果图：
要是是这种状况，那么最平安的选中是运用table表格进行布局。在某些状况下，您可以通过向每个第n个元素插入clear =“left”来以免这种状况 ，但是在增加或删除项目时可能难以保护。
总结：以上就是本篇文的全部内容，但愿能对大家的学习有所帮忙。
以上就是运用float（浮动）怎样布局？浮动布局的示例的细致内容，更多请关注 百分百源码网 其它相干文章！
