The clear property is directly related to floats. If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the float. Then the element will move down below the floated element. Here’s a simple example of
CSS
Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns. Fortunately, you can tell the browser to keep specific elements together with break-inside. li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } At the moment, the property universally accepts the values auto and
* { -moz-box-sizing: border-box; /* Firefox 1, probably can drop this */ -webkit-box-sizing: border-box; /* Safari 3-4, also probably droppable */ box-sizing: border-box; /* Everything else */ } The box-sizing property in CSS controls how the “box model” is handled in regards to page layout. For instance, if you set an element to width: 100px;
Used in casting shadows (often called “Drop Shadows”, like in Photoshop) from elements. Here is an example with the deepest possible browser support: .shadow { -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 – 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 – 3.6 */ box-shadow: 3px