DevGuru CSS2: clear

Quick References

Features

Partners

			PROPERTY: clear
			clear : none \| left \| right \| both Compatibility: IE4+ N4+ Version: Level 1 Inherited: No The clear property sets restrictions on where a floating element can be place with respect to previously placed element. It should only be applied to block-level elements. none The none value places no restriction on where the element can appear in the text. left The left value requires that a floating element must be placed lower than the previously occurring element on the left side. right The right value requires that a floating element must be placed lower than the previously occurring element on the right side. both The both value requires that a floating element must be placed below all previous elements. Code: a { clear: none; } b { clear: left; } li { clear: right; } p { clear: both; } or p.one { clear: left; } p.two { clear: right; } img { float: right; } ... <img src="/images.guru.gif"> <p class="one"> <b> First text appears to the left of the Guru image since it is only required to be below the previous element on the left side (which is "Output:") and the Guru is on the right side. Yet in the flow of the code, this text actually occurs after the Guru image. </b> </p> <p class="two"> <b> Second text appears completely below the Guru image since it is required to be below the previous element on the right side which is the Guru. </b> </p> Output: First text appears to the left of the Guru image since it is only required to be below the previous element on the left side (which is "Output:") and the Guru is on the right side. Yet in the flow of the code, this text actually occurs after the Guru image. Second text appears completely below the Guru image since it is required to be below the previous element on the right side which is the Guru.