先来说一下什么是浮动,简单来说就是将上下排列的元素让它们来左右显示。复杂点是指设置了浮动属性的元素会脱离标准普通流的控制,移动到父元素中指定位置的过程。
在css中通过float属性来定义浮动。
属性值 | 描述 |
---|---|
Left | 元素向左浮动。 |
Right | 元素向右浮动。 |
None | 默认值,元素不动,显示在文本出现的位置。 |
我们用一个简单的示例来了解float的用法:
我们先设置一个父元素,包裹着两个子元素,给他们设置好宽高,为了看得更清楚我给他们分别设置了背景颜色。
默认情况下两个子元素是上下排列的,即float的属性值为none时。
如果我们想让他们左右排列就需要用到float属性了
注:我们想让他们左右显示,就需要给两个子元素都设置float属性,仅给一个子元素设置无效。
先设置float:left属性,两个子元素会从左边开始排列显示。
当设置元素右浮动时,元素是从第一个子元素开始靠右进行浮动。
当然还可以让子元素一左一右显示,即给两个子元素根据需要设置不同的属性值即可。
还应当注意的是,当元素添加浮动之后,就会飘起来了,原本在标准文档流里额位置就不再占有了,后面的内容会自动把位置补上去,且浮动后排版的顺序与在html中标签的书写顺序有关。想让所有的子元素都浮动,就需要给所有的子元素都添加浮动属性。
还有喜欢前端技术的同学可以加QQ577873333,随时在线啊!!