CSS中的浮动

Posted 2020-07-18

1.CSS中的浮动元素，不会和周围的外边距合并。

2.float中有一个属性是none,用于防止元素浮动，看上去很傻，因为要让一个元素不浮动，不设置float属性不就可以了吗？如果要得到正常的不浮动行为，一定要设置float:none，也就是说让元素不浮动，一定要设定属性，但是不设定该属性的话，可能会浮动，也可能不会浮动，考虑到严谨，还是设定好。

3.对于非替换元素要设定浮动，必须声明该元素的width属性，不然会得到一些意想不到的结果。

4.打算对相应的元素设定浮动元素，一定要有包含块的全局概念。浮动元素是在包含块中浮动，浮动元素会生成块级框，即使它是行内框。

5.对于浮动元素，有几个规则需要遵守如下

• 浮动元素的左外边界不能超出其包含块的左内边界，右亦然
• 浮动元素的左外边界必须是源文件中之前出现的左浮动元素的右外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
• 左浮动元素的右外边界不会出现在其右边右浮动元素的左外边界的右边。
• 一个浮动元素的顶端不能比其父元素的内顶端更高
• 浮动元素的顶端不能比之前浮动元素顶端高
• 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远

额外申明一点，负外边距的设置看起来会比父元素宽或者高，但从技术上说没有违反规范。

如果一个浮动元素和正常流出现重叠？CSS2.1澄清了这个问题

1. 行内框与一个浮动元素重叠时候，，边框，背景和内容都在浮动元素之上显示
2. 块框与一个浮动元素重叠时候，边框和背景在浮动元素之下，内容在浮动元素之上显示。