网页设计下浮动（网页设计浮动和定位）

　　一、什么是网页设计下浮动 　　网页设计下浮动，又称元素浮动，是指在进行网页设计时，采用CSS属性float来实现元素相互旁边排放，让元素位置在另一元素的前面或者后面，从而可以实现垂直或水平的布局。CSS中的float属性的主要功能是让元素离开文档流以实现定位，浮动的主要目的是让文字环绕图片或元素，也可以用来实现几个部分的版面布局，尤其在制作多列的的网页布局时尤其明显。 　　二、float的基本用法 　　float的标准语法为：float:left（右）; 　　（1）float:left 　　使用float:left设定元素浮动，元素将以左边紧挨着其前面元素（如果没有就是最左边）的方式排列，元素排列过程中会自动换行。 　　（2）float:right 　　使用float:right设定元素浮动，元素将以右边紧挨着其前面元素（如果没有就是最右边）的方式排列，元素排列过程中会自动换行。 　　三、float的使用规则 　　1.浮动块由空白字符（空格、换行符等）组成，其内部元素不用受float影响，即float不会影响元素内元素的浮动。 　　2.float元素排列时，上下文包住元素，元素外部存在边距会影响元素排列。如果元素被margin或者padding影响，按其预设模式排列，如果padding太大，则可能把元素拉出浮动体外。 　　3.float的元素排列时，不会影响常规元素的排列，float的排列优先。浮动元素会呈现绝对定位，可能会挤破常规元素的排列，此时可以添加clear属性，使元素穿过挤压的元素。 　　4.float的元素受外部元素影响，如其外框和文本，但不会受其内部元素影响，即沿着外部元素方向排列。 　　四、CSS中清除float 　　由于浮动元素会离开文档流，使布局发生变化，如果需要清除浮动，可以运用CSS中的clear属性就可以清除浮动。 　　clear属性值主要有： 　　（1）.clear:none; //表示不清除浮动 　　（2）.clear:left; //表示左边不出现浮动元素 　　（3）.clear:right; //表示右边不出现浮动元素 　　（4）.clear:both; //表示左右都不出现浮动元素 　　使用clear属性进行浮动清除时，外框和文本也会被清除，也就是说使用clear属性时，浮动元素前后都将没有任何元素，不管是浮动元素还是常规元素，这样可以有效阻止浮动元素使布局发生变化。 　　1、 网页设计中的浮动是一种排版技术，是指在网页布局中，必须占据特定位置和特定大小的页面元素内部，可以在页面上按照自定义的位置进行排列的技术。它允许创造者自由的在网页上排版，元素之间可以利用空余的位置将所有的内容放置在最佳的位置，以突出内容的重点，更好的让用户高效看到重要的内容。 　　2、 我们知道，在一个网页上，没有浮动设计，文字和图片等将会按照“网格”形式排列，会明显的出现一个矩型的被框住的效果。而利用浮动技术，文字和图片将可以放置到你想要的任何位置，并且不会在页面中出现无用的空白，可以让用户更美好的体验和更加直接的去阅读，这样的弹性度可以使你的网页更加有层次感，也有利于将更多的内容放置在该页面上。 　　3、 浮动有很多用途，可以用来改变网页中文字和图片的位置，而浮动技术本身也并不复杂，只是使用CSS，你可以使用float属性来设置元素在页面中的位置，你可以设置元素向左浮动，也可以设置元素向右浮动，还可以设置元素在页面上不浮动。 　　4、 除此之外，浮动技术还可以用来控制布局的复合结构，可以用来改变页面的布局方式，如：将两列布局变成一列布局，或者是将两列布局变成一行布局，这样看起来会更加整齐美观。 　　5、 另外，浮动技术的另一用途，可以让你的网页元素自动调整大小，比如将一个宽度为200px的元素调整至宽度为150px，使其能够吸引更多的注意力，这丷技术可以使你的网页元素变得更加活跃。 　　6、 总之，浮动技术对于设计简洁，高效的网页来说，是非常重要的一种技术。它的应用使网页的布局更加灵活，方便网页的浏览，也让网页更加丰富，增加用户的游览体验。